v-model：双向数据绑定
<div id="app"> 输入您的姓名: <input type="text" v-model="name"> <p>{{ $data | json }}</p> <p>{{ name }}</p></div><script> var V = new Vue({ el : '#app', data : { name : '_Appian' } });</script>input中输入的name，会被时时获取到；
v-on：事件绑定
<div id="app"> 输入您的姓名: <input type="text" v-model="name"> <button v-on:click="say">欢迎点击</button> <button @click="say">欢迎点击</button> //缩写</div><script> var V = new Vue({ el : '#app', data : { name : '_Appian' }, methods : { say : function(){ alert('欢迎' + this.name); } } });</script>还可以绑定其他的，如
| 事件名 |
|---|
| v-on:mouSEOve |
| v-on:keydown |
| v-on:submit |
| v-on:keyPRess |
| v-on:keyup |
| … |
v-if&v-show&v-else：条件判断
<div id="app"> <section v-if="loginStatus"> 输入您的姓名: <input type="text" v-model="name"> <button v-on:click="say">欢迎点击</button> </section> <section v-if="!loginStatus"> 登录用户: <input type="text"> 登录密码: <input type="passWord"> <button @click="say">欢迎点击</button> </section></div><script> var V = new Vue({ el : '#app', data : { name : '_Appian', loginStatus : false }, methods : { say : function(){ alert('欢迎' + this.name); }, change:function(){ this.loginStatus=!this.loginStatus; }, } });</script>this的执行就是实例V
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
v-for：输出列表
<div id="app"> <ul> <li v-for="el in products"> {{ el.name }} - ￥ {{ el. price }} - {{ el. category }} </li> </ul></div><script> var V = new Vue({ el : '#app', data : { products : [ {name: 'microphone', price: 25, category: 'electronics'}, {name: 'laptop case', price: 15, category: 'accessories'}, {name: 'screen cleaner', price: 17, category: 'accessories'}, {name: 'laptop charger', price: 70, category: 'electronics'}, {name: 'mouse', price: 40, category: 'electronics'}, {name: 'earphones', price: 20, category: 'electronics'}, {name: 'monitor', price: 120, category: 'electronics'} ] } });</script>对象里的对应下标
//#1<li v-for="el in products"> {{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}</li>//#2<li v-for="(index,el) in products"> {{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}</li>新闻热点
疑难解答
