第二章 Vue内部指令

模块二：Vue内部指令荣耀·分享·共成长01.

单元一:条件指令和循环指令02.单元二:事件命令单元目录荣耀·分享·共成长03.单元三:html命令1单元一：条件指令和循环指令荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：v-ifv-elsev-show知识点2：v-for指令：解决模板循环问题知识点1：v-ifv-elsev-showv-if：根据表达式的布尔值判断是否插入标签，当条件为true时显示标签内容，当条件为false时隐藏标签内容v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。荣耀·分享·共成长

v-if案例：<divid="app"><pv-if="msg==1">相等</p><pv-if="msg===1">相等类型不同</p><hr/><pv-if="msg=='1'">相等</p><pv-if="msg==='1'">相等</p></div><script>varvm=newVue({el:'#app',data:{msg:'1'}});</script>知识点1：v-ifv-elsev-show荣耀·分享·共成长知识点1：v-ifv-elsev-show荣耀·分享·共成长

v-else是紧跟在v-if或v-else-if之后。

前边v-if或v-else-if表达式的布尔值判断为false时才显示标签内容

v-else案例：<divid="root"><divv-if="show===a">ThisisA</div><divv-else-if="show===b">ThisisB</div><divv-else>Thisisothers</div></div><script>varvm=newVue({el:root,data:{show:true}})</script>知识点1：v-ifv-elsev-show荣耀·分享·共成长知识点1：v-ifv-elsev-show

条件渲染：v-if:每次都会重新删除或者创建元素有比较高的切换性能的消耗如果元素设计频繁的切换，最好不使用v-ifv-show：每次不会重新进行DOM元素的删除和创建，只是切换了元素的display样式有较高的初始渲染的消耗如果元素很少被现实在页面，不推荐使用v-show荣耀·分享·共成长荣耀·分享·共成长知识点2：v-ifv-elsev-showV-show案例<divid="app"><!--<inputtype="button"value="切换"@click="toggle"/>

<inputtype="button"value="切换"@click="flag=!flag"/><divv-if="flag">这是条件渲染元素</div><divv-show="flag">这是条件渲染元素</div></div><script>varvm=newVue({el:'#app',data:{flag:false注意：data中最后数据没有；。用，隔开},/*methods:{toggle(){this.flag=!this.flag;}}*/});</script>荣耀·分享·共成长知识点2：v-for指令：解决模板循环问题如何解决vuejs中复用形式造成的渲染的数据的问题？

key用来表示每一向单独的数据注意：使用v-for遍历数据的时候，使用key作为每荣耀·分享·共成长知识点2：v-for指令：解决模板循环问题

V-for案例：<divv-for="iteminlist":key="item.id"><inputtype="checkbox"/>{{item.id}}---{{}}</div>2单元二：事件命令荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：v-on：绑定事件监听器知识点2：v-model指令知识点3：v-bind指令荣耀·分享·共成长v-on指令：事件绑定直接使用指令v-on v-on:事件名；简化形式，缩写，语法糖 @事件名；注意：无：号注意：绑定以后可以使用在vue实例中数据和方法知识点1：v-on：绑定事件监听器知识点1：v-on：绑定事件监听器荣耀·分享·共成长v-on案例：<divid="app"><!--方式1--><inputtype=“button”value=“点击有惊喜”v-on:click=“show”/>注意：括号可有可无，有参数时必须写<!--方式2缩写，语法糖--><inputtype="button"value="点击有惊喜"@click="show"/></div><script>varvm=newVue({el:'#app',data:{msg:'hello'},methods:{/*show:function(){//写法1：alert('哈哈');console.log('哈哈');}*///写法2：ES6语法ES6就是ECMAScript6是新版本JavaScript语言的标准，目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。show(){//alert(‘哈哈’);//console.log(‘哈哈’);alert(this.msg);//注意：this必须有，指当前的对象。多个方法之间使用，分开}}});</script>知识点2：

v-model指令荣耀·分享·共成长v-model指令：双向数据绑定；指令使用；什么是双向数据绑定？单向绑定：data里的数据可以影响dom元素的表现，但是dom不能影响data，即数据都是从data传向dom。双向绑定：data里的数据和dom元素的表现双方可以互相决定对方的值荣耀·分享·共成长v-model案例：<divid="app">单向的数据绑定M->V<inputtype="text"v-bind:value="msg"/>双向的数据绑定M<->V<inputtype="text"v-model="msg"/></div><script>varvm=newVue({el:'#app',data:{msg:'哈哈'}});</script>知识点2：

v-model指令荣耀·分享·共成长v-bind指令：属性绑定；（注意v-bind绑定属性和样式，如src、style、class）直接使用指令 v-bind:属性名；简化形式，缩写，语法糖 :属性名；知识点3：v-bind指令荣耀·分享·共成长v-bind案例：<divid="app"> <imgsrc="img/1.png"><br/> <!--方式1--><imgv-bind:src="url"><br/> <!--方式2：语法糖,缩写--><img:src="url"><br/></div><script> varvm=newVue({ el:'#app’, data:{url:'img/1.png’ } });</script><imgv-bind:src="url"v-bind:width="myWidth"/>data:{myWidth:'200px',url:'img/1.jpg'}知识点3：v-bind指令3单元三：html命令荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：文本插值知识点2：v-pre&v-cloak&v-once知识点3：v-text&v-html知识点1：文本插值插值表达式（Mustache）错误的：不可以连续写{{firstNamelastName}}<br/> 正确的：可以写变量，也可以写表达式{{firstName+lastName}}<br/> {{firstName+''+lastName}}<br/> {{firstName}}{{lastName}}<br/> 可以写表达式 {{counter*2}}<br/>荣耀·分享·共成长荣耀·分享·共成长知识点1：文本插值插值表达式（Mustache）案例<divid="app"> {{msg}} </div> <!--注意：script位于<div>之后，放在头部不显示ViewModel---中间的调度者--> <script> varvm=newVue({ el:'#app’, data:{ msg:'中国加油’ } }); </script>事件修饰符；.stop 阻止冒泡。冒泡：点击子元素，会触发父元素的事件。给子元素添加stop.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式。实现捕获触发事件的机制,即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。给父元素添加capture.self 只当事件在该元素本身（比如不是子元素）触发时触发回调。给父元素设置.once事件只触发一次荣耀·分享·共成长.prevent阻止默认事件知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长.prevent阻止默认事件案例<divid="app"><ahref="">百度一下</a><br/>触发事件，默认的跳转实现<ahref=""@click="link">百度一下</a><br/>触发事件，默认的行为被阻止<ahref=""@click.prevent="link">百度一下</a><br/></div><script>varvm=newVue({el:'#app',data:{},methods:{link(){console.log('触发a标签的事件');}}})</script>使用场景：<a>删除</a>知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长可以使用v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除。当网络较慢，网页还在加载Vue.js，而导致Vue来不及渲染，这时页面就会显示出Vue源代码。我们可以使用v-cloak指令来解决这一问题。知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长v-cloak案例：<script>varapp=newVue({el:'#app',data:{context:'互联网头部玩家钟爱的健身项目'}});</script><divid="app"v-cloak>{{context}}</div>css：[v-cloak]{display:none;}知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长荣耀·分享·共成长.once事件只触发一次知识点2：v-pre&v-cloak&v-once知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长.once事件只触发一次案例<divid="app">触发事件，默认的行为被阻止<ahref=""@click.once.prevent="link">百度一下</a><br/>触发事件，默认的行为被阻止，只有一次<ahref=""@click.once.prevent="link">百度一下</a><br/></div><script>varvm=newVue({el:'#app',data:{},methods:{link(){console.log('触发a标签的事件');}}})</script>

v-text用于渲染普通文本，无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。知识点3：v-text&v-html荣耀·分享·共成长荣耀·分享·共成长

v-text使用<divid="app"> <div>原来的内容{{msg}}</div> <divv-text="msg">原来的内容</div><script> varvm=new