将课上提及的vue指令全部上机操作并发
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active{color:cyan;}.bigfontsize{font-size:26px;}ul,li{list-style: none;}ul li:nth-of-type(1){background-color:lightsalmon}</style></head><body><div class="test"><p>{{title}}</p><!-- v-text 是由vue实例掌管的自定义属性，称为"指令.作用:相当于 innerText,textContent" --><p v-text="vtext"></p><p v-once="vtext">v-once让vtext本次不渲染</p><!-- v-html 相当于innerHTML --><p v-html="vhtml"></p><!-- v-bind v-on 指令 --><p v-bind:style="style">使用v-bind:style</p><!-- v-bind 指令简写为冒号 :;它绑定的属性支持表达式 --><p :style="'color:red'">{{vbind}}：style的值：'color:red'</p><p :style="`color:red`">{{vbind}}：style的值：`color:red`</p><p :style="`${style}`">{{vbind}}：style的值：`${style}`</p><!-- 绑定类 --><p :class="`active bigfontsize`">{{vbindclass}}：class的值:`active bigfontsize`</p><p :class="class1">{{vbindclass}}：class的值:class1是vue中定义的值</p><p :class="`active bigfontsize`">{{vbindclass}}：class的值:`active bigfontsize`</p><p :class="{active:false,bigfontsize:true}">{{vbindclass}}：class的值:{active:false,bigfontsize:true}</p><p :class="{active:boolT,bigfontsize:boolT}">{{vbindclass}}：class的值:{active:boolT,bigfontsize:boolT}</p><p :class="[active1,bigfontsize1]">{{vbindclass}}：class的值:[active1,bigfontsize1]</p><p :class="[`active`,`${bigfontsize1}`]">{{vbindclass}}：class的值:[`active`,`${bigfontsize1}</p><!-- 绑定事件：v-on 简写为@,可以通过prevent来阻止事件的默认行为 --><p><a href="3.0.html" v-on:click="show">点击触发事件</a></p><p><a href="3.0.html" v-on:click.prevent.once="show">点击触发事件,并阻止默认事件,可以冒泡</a></p><p><a href="3.0.html" v-on:click.prevent.stop="show">点击触发事件,并阻止默认事件,阻止冒泡</a></p><!-- once只允许vue绑定的事件执行一次，触发以后会清除vue绑定的事件 --><p><a href="3.0.html" v-on:click.prevent.stop.once="show">点击触发事件,并阻止默认事件,阻止冒泡,只执行一次</a></p><!-- 事件传参，注意vue的事件对象的参数名称只能是$event; --><button @click.stop="add($event,100,200)">相加</button><!-- 双向绑定 --><p>模型{{webjs}}</p><p>双向绑定<input type="text" name="input" :value="webjs" @input="webjs=$event.target.value" ></p><p>双向绑定简写:<input type="text" name="input" :value="webjs" v-model="webjs" ></p><input type="text" name="input" :value="webjs" v-model="webjs" ><!-- 懒加载 --><p>懒加载 :<input type="text" name="input" :value="webjs" v-model.lazy="webjs" ></p><!-- 数字类型测试 --><p><input type="text" name="input" :value="num" v-model.number="num" ></p><p>{{ typeof num}}</p></div><div class="app"><p>{{define}}</p><!-- key:可以干预diff算法 --><!-- VUE通过稳定唯一的key来判断节点是否要重新渲染，以提升效率 --><!-- 遍历数组 --><ul><li>遍历数组</li><li v-for="(item,index) in items" :key="index">{{index}}---{{item}}</li></ul><!-- 遍历对象 --><ul><li>遍历对象</li><li v-for="(item,prop,index) in user" :key="prop">{{prop}}---{{item}}---{{index}}</li></ul><!-- 遍历对象数组 --><ul><li>遍历对象数组</li><li v-for="(user,index) in users" :key="user.id">{{user.id}}---{{user.name}}---{{user.tel}}</li></ul><!-- 解构 --><ul><li>解构</li><li v-for="(n,index) in 10" :key="n">{{index}}---{{n}}</li></ul></div><!-- VUEJS包引入 =====> @input="webjs=$event.target.value" --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script><script>//创建vue实例const vi=new Vue({el:'.test',//完成挂载//数据注入data:{title:'hello，VUE学习启动了！',vtext:'v-text 指令测试',vhtml:'<span>vhtml使用</span>',style:'color:red;background-color:cyan;',class1:`active bigfontsize`,vbind:'v-bind绑定指令',vbindclass:'v-bind绑定class',boolF:false,boolT:true,active1:'active',bigfontsize1:'bigfontsize',webjs:'双向绑定实现绑定',num:0,},methods:{show:function(){//vue 中的this代表它的实例alert(this.title);},add:function(ev,a,b){console.log(ev),console.log('%d + %d = %d',a,b,a+b);console.log(a," + ",b,"=",a+b);},}})vi.vhtml='<span style="color:red">vhtml使用v-html</span>';//这里定义的值必须出现的data定义里面document.querySelector('.test').addEventListener('click',function(){// alert(this.tagName);});//单独绑定节点实现v-forconst forarr=new Vue({el:'.app',//完成挂载//数据注入data:{define:'VUE的遍历',//数组items:['北京','上海','广州'],//对象user:{name:'张三',email:'nandehutu@126.com',},//对象数组users:[{id:1,name:'zhangsan',tel:13696685574},{id:2,name:'mingmign',tel:1899668574},{id:3,name:'sanwuqun',tel:123968574}],},})</script></body></html>
效果：
