收藏
天蓬老师批改状态：合格
老师批语：
<!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 设置一个 挂载点 --><div class="gzd"><!-- {{}}数据占位符 --><p>11111{{test}}</p><p>{{be ? 'true真' : 'false假'}}</p></div><script>// 实例化 vueconst Vus = new Vue({//挂在元素el: document.querySelector('.gzd'),// document.querySelector('.gzd'),// el: '.gzd',//数据注入data: {test: 'vue-测试0',name: '御弟哥哥',//be: false,be: true,},});// console.log(Vus.le);//访问data属性 数据 的两种方法// 因为 vue中的data中的属性会自动成为vue实例的属性，console.log(Vus.test);console.log(Vus.$data.name);console.log(Vus.name);//vue 指令 ：vue实例管理的自定义属性，称为指令// v-text :// v-once :// v-html :const vus2 = new Vue({//el:'.app',el: document.querySelector('.app'),data:{name:'刚哥6',}});console.log(vus2.name);</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="mod"><p>单选绑定：模型中的数据改变后模板的数据跟着改变------{{name}}</p><p>模型中的数据：--{{name}}</p><!-- 双向绑定 就是指：在页面中改变值后，模型中的数据也更正改变须要注意：须要监听input输入框的值，input事件 点击的哪一个的输入框，的值input keyup 两个都可以--><p>双向绑定：在页面中改变值后，模型中的数据也更正改变---<input type="text" name='' :value="name" @input="name=$event.target.value"></p><p>双向绑定：在页面中改变值后，模型中的数据也更正改变---<input type="text" name='' v-bind:value="name" v-on:keyup="name=$event.target.value"></p><!-- 通过 vue 语法糖 （@input="name=$event.target.value" === v-model 简写 ） --><!-- v-model也可以和.lazy、.trim和.number这些修饰符一起使用。 --><!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步 --><!-- input v-model.lazy="msg" .lazy 懒加载 按回车(或失去焦点)后才会更新数据 --><!-- v-model.trim="msg" .trim 去除字符串首尾的空格--><!-- v-model.number="msg" .number 将数据转化为数值类型 --><p>v-model 双向绑定模型数据：---{{name1}}</p><!-- <p>v-model 双向绑定：<input type="text" name="" value="name1" v-model="name1"></p> --><p>v-model 双向绑定lazy：<input type="text" name="" v-model.lazy="name1"></p><p>v-model 双向绑定number：<input type="text" name="" v-model.number="name1"></p><p>v-model 双向绑定trim：<input type="text" name="" v-model.trim="name1"></p><p>v-model 双向绑定number：<input type="text" name="" v-model.number="num"></p><p>{{typeof num}}</p></div><script>const ModVm = new Vue({el: '#mod',data: {name:'观音姐姐666888',name1:'王母娘娘',num:'666',},});// console.log(ModVm.name1.typeof());// console.log(typeof(ModVm.num));</script>
<style>.cor1{color:blue;background-color: yellowgreen;font-size: 50px;}</style></head><body><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 挂载点 --><div class="app"><!-- <p style='color:red'>{{name}}</p> --><!-- 绑定style 属性 --><p v-bind:style='style1'>{{name}}</p><!--v-bind是高频指令可以 简写成 ：可以直接加 ： 省略v-bind--><p :style='style1'>{{name}}</p><!-- 绑定类class属性 --><!-- 字面量方式 --><p :class='`cor1`'>{{name}}</p><p :class=`cor1`>{{name}}</p><!-- 表达式方式 --><p :class='cls'>{{name}}+表达式</p><p :class='{cor1:false} '>{{name}}+表达式</p><p :class='{cor1:true} '>{{name}}+表达式</p><p :class='{cor1:zhuangtai} '>{{name}}+表达式zt</p><!-- 绑定事件 v-on --><p><a href="www.baidu.com" v-on:click='show'>打开百度1</a></p><!--阻止a标签的默认跳转行为prevent修饰符：阻止元素的默认行为--><p><a href="www.baidu.com" v-on:click.prevent='show'>打开百度2</a></p><!--v-on 也是高频指令 可以简写为 @--><p><a href="www.baidu.com" @click.prevent='show'>打开百度3</a></p><!-- stop: 阻止事件冒泡 --><!-- <p><a href="www.baidu.com" @click.prevent.stop='show'>打开百度3</a></p> --><!-- once 只允许执行一次 --><!-- <p><a href="www.baidu.com" @click.prevent.once.stop='show'>打开百度3</a></p> --><!--事件方法的传参事件对象 的 参数名 必须是$event--><button @click="sum($event,100,200)">click点击</button></div><script>const Vm = new Vue({//绑定挂载点el: '.app',//注入自定义属性data:{name:'如来佛祖',style1:'color:red',cls:'cor1',// true 和 false 不能加 引号，加了引号就转换成字符串了zhuangtai: true,},//注入方法（函数）methods: {show() {//this 指的是 Vm ，vue的实例对象alert(this.name);},sum(ev,a,b){//查看被点击的元素和事件类型// console.log(ev.type,ev.target);console.log(a + b) ;console.log(`a:${a}+b:${b}=${a+b}`) ;},},});</script>
<!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div class="app"><ul><!-- key :可以干预 diff 算法 --><!-- vue 通过稳定且唯一的 key 值判断这个节点是否须要重新渲染，以提升效率 --><!-- key 只能是 整数或者字符串 --><li v-for="(item,index ) in adds" :key="index">{{index}}----{{item}}</li></ul><ol><li v-for="(item, key, index) in obj111" :key="key">{{item}}----{{key}}--kye---{{index}}</li></ol><ol><li v-for="(item ,index) in obj222" :key='item.id'>{{item.id}}---{{item.name}}----{{item.gj}}</li></ol></div><script>const AppVm = new Vue({el: '.app',data: {//数组adds: ['成都', '重庆', '西安', '北京'],//对象obj111: {name: '如来佛祖的舅舅的外甥的妈妈是谁的妈妈',sex: '如来佛祖是男的还是女的啊',age: '如来多少岁了',},//对象数组// obj222: {// ['日本','中国','韩国','朝鲜','印度']// ['亚洲','欧洲','大洋洲','北美洲','南美洲','非洲']// ['小孩','大人','男人','女人','老人','好人','坏人']// },obj222: [{ 'id': '1', 'name': '八戒', 'gj': '朝鲜' },{ 'id': '12', 'name': '悟空', 'gj': '美国' },{ 'id': '112', 'name': '如来', 'gj': '日本' },],},});</script>
<!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div class="app"><!-- v-text: 是专门由 vue实例 管理的自定义属性， 称为vue指令 --><!-- v-text 可以理解为 textContent和 innerText,<p>这里会补占用，写了也不会显示</p> --><p v-text='name'>这里写的不会显示</p><p v-text='name'>{{name}}</p><p v-text>{{name}}</p><!-- {{sex}} 注意语法：这里还不能写引号 --><p v-once>{{sex}}</p><p v-once>{{sex}}</p><p v-once='sex'></p><!-- v-html 可以理解为 innerHtml 它支持html 标签 --><p v-html='ben'></p></div><script>const Vm = new Vue({el: '.app',data:{name:'山鸡扛把子',sex: '不是男人就是女人，21世纪没有太监，哦错了！还有人妖666',ben:"<p style='color:red'> 你好我是html</p>",}});</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
