vue.js指令总结
1.v-html
用于输出真正html，而不是纯文本。
2.v-text
输出纯文本。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html与v-text的区别</title> <script src="js/vue.min.js"></script> </head> <body id="body"> <div v-html="showHTML"></div> <div v-text="showText"></div> <script> var ve=new Vue({ el:'#body', data:{ showHTML:'<b><i>这里我们输出HTML，HTML标签将会不会显示，并且文本将会按照标签类型显示</i></b>', showText:'<b>这里我们输出纯文本，HTML标签将会在浏览器上显示</b>' } }) </script> </body> </html>
3.v-show
官方文档的定义是：将元素的显示设置为none或其原始值，具体取决于绑定值的真实性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-show的使用</title> <script src="js/vue.min.js"></script> </head> <body> <div v-show="true" style="width:200px;height:200px;background:red;" id="app"></div> <script> var ve=new Vue({ el:'#app' }) </script> </body> </html>
这里要说明一下v-show=“true”是显示，v-show="false'或者v-show="none'是隐藏，还有el:"#app"不可以省去，否则v-show会失效。
4.v-bind
用于html属性的数据绑定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.new.js"></script> <style> .toGreen{background: green;} .toRed{background: red;} .toYellow{border:1px solid black;} </style> </head> <body> <div v-bind:class="{toGreen:isGreen,toRed:isRed}" style="width:200px;height:200px;" id="whatColor" v-on:click="changeColor()" class="toYellow"></div> <script> var ve=new Vue({ el:'#whatColor', data:{ isGreen:true, isRed:false }, methods:{ changeColor:function(){ ve.isGreen=!ve.isGreen; ve.isRed=!ve.isRed } } }) </script> </body> </html>
3.v-on
用于监听DOM事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的使用</title> <script src="js/vue.js"></script> </head> <body> <div id="v-on" v-on:click="changeStatus"> {{message}} </div> <script> var vOn=new Vue({ el:'#v-on', data:{ message:'我喜欢vue.js' }, methods:{ changeStatus:function(){ if(this.message=='我喜欢vue.js') { this.message='我不喜欢vue.js' } else { this.message="我喜欢vue.js" } } } }) </script> </body> </html>
注意：只有v-on和v-bind可以接参数，在指令后面用冒号指明属性和值绑定。
4.v-model
用于表单输入与应用状态的双向数据绑定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model的使用</title> <script src="js/vue.js"></script> </head> <body> <div id="v-model"> <input type="text" v-model="message"> <p>{{message}}</p> </div> <script> var vModel=new Vue({ el:'#v-model', data:{ message:'' } }) </script> </body> </html>
5.v-if
v-if接收bool类型。true的话则生成html，false则不生成。或者直接将元素remove掉。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if的使用</title> <script src="js/vue.js"></script> </head> <body> <div id="v-if"> <p v-if="seen">我在闪烁</p> </div> <script> var vIf=new Vue({ el:'#v-if', data:{ seen:true }, methods:{ change:function(){ if(this.seen) { this.seen=false; } else { this.seen=true; } } } }) setInterval(vIf.change,1000) </script> </body> </html>
6.v-pre
跳过瓷元素及其子元素，跳过大量没有指令的节点加快编译速度。
7.v-cloak
官方文档：该属性保留在元素上，直到关联的ViewModel完成编译。结合CSS规则，例如[v-cloak] { display: none }，该指令可用于隐藏未编译的胡须绑定，直到ViewModel准备好。
在vm未加载之前，html中的插值会存在，影响页面美观。在元素上添加v-cloak并在css中写入[v-cloak]{display:none;}，vm加载之前，该元素一直隐藏，v-cloak指令存在，vm加载之后，元素显示，v-cloak指令消失。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <style> [v-cloak]{display: none;} </style> </head> <body> <div v-cloak>{{message}}</div> </body> </html>
8.v-el
在vue2.0之前的版本使用，vue2.0之后用ref代替。这里是用vm.$$.XX获取带v-el指令的元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> </head> <body id="body"> <div v-el="hi" style="width:100px;"></div> <script> var vm=new Vue({ el:'#body' }) alert(vm.$$.hi.style.width) </script> </body> </html>
9v-for
用于渲染列表项。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for得使用</title> <script src="js/vue.js"></script> </head> <body> <ul id="ul"> <li v-for="(item,index) in items"> {{item.message}}-{{index}} </li> </ul> <script> var oUl=new Vue({ el:'#ul', data:{ items:[ {message:'Foo'}, {message:'Bar'} ] } }) </script> <ul id="ul1"> <template v-for="item in items"> <li>{{item.msg1}}</li> <li>{{item.msg2}}</li> </template> </ul> <script> var oUl=new Vue({ el:'#ul1', data:{ items:[ {msg1:'1-1',msg2:'1-2'}, {msg1:'2-1',msg2:'2-2'}, {msg1:'3-1',msg2:'3-2'}, ] } }) </script> </body> </html>
