（1） v-model
双向数据绑定，一般用于表单元素
<script> window.onload=function(){ new Vue({ // el:'.itany', el:'div', //vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是可以的 data:{ name:'', //即使没有值，也不能省略，报错 age:21, flag:true, nums:[12,4,23,5], user:{id:9527,name:'唐伯虎'} } }); } </script>
（2） v-for
对数组或对象进行循环操作，使用的是v-for，不是v-repeat
注：在vue1.0中提供了隐式变量，如$index、$key
在vue2.0中去除了隐式变量，已被废除
<script> window.onload=function(){ new Vue({ el:'#itany', data:{ arr:[12,4,5,34,2,11], user:{id:9527,name:'唐伯虎',age:25}, arr2:[12,4,5,34,2,11,12], users:[ {id:9527,name:'唐伯虎',age:25}, {id:1001,name:'秋香',age:22}, {id:1002,name:'石榴姐',age:24} ] } }); } </script>
<body> <div id="itany"> <!-- {{arr}} --> <ul> <!-- 普通循环 --> <!-- <li v-for="value in arr">{{value}}</li> --> <!-- <li v-for="value in user">{{value}}</li> --> <!-- 键值循环 --> <!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> --> <!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> --> <!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by --> <!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> --> <li v-for="(user,index) in users"> {{index+1}},{{user.id}},{{user.name}},{{user.age}} </li> </ul> </div> </body>
（3） v-on
用来绑定事件，用法：v-on:事件="函数"
<script> window.onload=function(){ let vm=new Vue({ el:'#itany', data:{ //存储数据 arr:[12,34,45,23,5] }, methods:{ //存储方法 show:function(){ console.log('show方法'); }, add(){ // console.log(this); //this表示当前vue实例 // console.log(this===vm); //true this.arr.push(666); //使用this访问当前实例中的成员 // this.show(); } } }); } </script>
<body> <div id="itany"> <!-- <button onclick="show()">点我</button> --> <button v-on:click="show">点我</button> <button v-on:click="add()">向数组中添加一个元素</button> <br> {{arr}} <hr> <button v-on:mouseover="show">鼠标经过</button> <button v-on:dblclick="show">鼠标双击</button> </div> </body>
（4） v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似
<script> window.onload=function(){ let vm=new Vue({ el:'#itany', data:{ flag:true }, methods:{ change(){ this.flag=!this.flag; } } }); } </script>
<body> <div id="itany"> <!-- <button v-on:click="change">隐藏</button> --> <button v-on:click="flag=!flag">隐藏</button> <hr> <div style=" 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div> </div> </body>