Vue指令學習
阿新 • • 發佈：2018-11-05
- v-text,v-html的區別：與JQuery的text()和html()方法差不多,v-text是會對其中的html標記進行轉義，轉換為字串形式的文字，v-html則可正常顯示html標記的作用；
- v-show和v-if在設定內容顯示時的區別:v-show方法是把元素的dispaly屬性設定為none,而v-if則根據布林值的改變通過銷燬Dom和重建Dom來實現；v-else if,v-else與v-if配合使用，列表渲染：v-for迴圈使用簡例:
<li v-for="(item,index)of list" :key="index">{{item}}(設定key值可以增加瀏覽器的渲染效率),但在實際專案，index作為key值並不是一個很好的選擇.因為如果要進行大量的dom操作，很可能會出現問題，通常我們選擇ajax返回的資料中的id等作為唯一的key值. - v-bind:單向繫結，簡寫形式為 “:”,可用於屬性繫結，如設定一個圖片的title屬性：v-bind:title:“title”（繫結Vue例項裡的data屬性裡的值）；v-on:事件響應，簡寫形式為"@",可用於設定任何js事件如：click,focus,mousemove等；雙向資料繫結：v-model:常用於與input標籤繫結。
- 計算屬性和偵聽器：computed和watch
計算屬性好處是可以快取，比如說在計算屬性中計算一個值需要進行大量的操作，如果將這個計算放在methods中，則只要每次進行重繪，都會觸發這個計算，這樣是會很耗效能的，但如果將這個計算放在計算屬性中，只要這個值不發生變化，那就不會重新計算，返回的還是這個值，這樣也可以節省效能。
watch用於監聽資料的變化
使用例項：
<body> <div id="root"> 姓：<input v-model="firstName"> 名：<input v-model="lastName"> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#root", data: { firstName:'', lastName:'', count:0 }, computed:{ fullName: function(){ return this.firstName+" "+this.lastName } }, watch:{ fullName:function(){ this.count ++ } } }) </script> </body>
該簡單例項中的watch用於監聽fullName,即firstName和lastName的每一次變化count都會加一