1.v-html
用于输出真正html，而不是纯文本。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html的使用</title> <script src="js/vue.js"></script> </head> <body> <div id="v-html" v-html="message"> {{message}} </div> <script> var vHtml=new Vue({ el:‘#v-html‘, data:{ message:‘<p>v-html指令添加的p标签</p>‘ } }) </script> </body> </html>
2.v-bind
用于html属性的数据绑定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind的使用</title> <script src="js/vue.js"></script> </head> <body> <input id="v-bind" type="text" v-bind:disabled="message"> <script> var vBind=new Vue({ el:‘#v-bind‘, data:{ message:‘false‘ } }) </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.
原文：http://www.cnblogs.com/iwebkit/p/6675378.html