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>新聞熱點
疑難解答
