1.v-on绑定事件 事件定义在vue实例的methods属性中
如:
<div v-on:click="handleClick"></div>
也可简写成(v-on:等于:)
<div title="1111" :click="handleClick"></div>
2.v-bind绑定属性 属性内的值为实例中data对应的值 也可以写js表达式
如
<div v-bind:title="title" v-on:click="handleClick"></div>
也可简写成(v-bind:等于@)
<div @title="title" v-on:click="handleClick"></div>
3.v-model 双向绑定 如
<input v-model="lastName" />
将input绑定了lastName的值 如果input框值修改 实例中对应的lastName值也会修改
4.计算属性 computed 用来定义属性 计算属性由其他数据计算出来的 如
computed:{ fullName:function () { return this.firstName + this.lastName; } }
fullName为firstName和lastName计算而来;好处是若firstName和lastName没变时使用的是上次保存的缓存值,提高性能。
5.侦听器 watch 用来监听值得变化 如
watch:{ fullName: function () { this.count ++ } }
用来监听fullName的变化
6.v-if和v-show效果相同 但v-if不会生成dom v-show生成dom但是display为none 根据dom显示消失频率来决定使用哪个性能更好
7.v-for可以使用:key提高效率 但是要求key值不能相同 可以使用index 也可以使用不重复的键值 如
<li v-for="(item,index) in list" :key="index">{{item}}</li>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>veuIndex</title> <script type="text/javascript" src="js/vue.min.js"></script> </head> <body> <div id="root"> <div title="1111" :click="handleClick"> <input v-model="firstName" /> <input v-model="lastName" /> <div>{{fullName}}</div> <div>{{count}}</div> <div v-show="show">{{content}}</div> <button @click="handleClick">toggle</button> <ul> <li v-for="(item,index) in list" :key="index">{{item}}</li> </ul> </div> </div> <script> new Vue({ el: "#root", data: { msg: "Hello World", content:"ttt", firstName:'', lastName:'', count:0, show:true, list:[1,2,3] }, methods : { handleClick:function () { this.show = !this.show; } }, computed:{ fullName:function () { return this.firstName + this.lastName; } }, watch:{ fullName: function () { this.count ++ } } }) </script> </body> </html>