1. 程式人生 > >vue學習:內建指令

vue學習:內建指令

1、v-bind:響應並更新DOM特性;例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb

2、v-on:用於監聽DOM事件; 例如:v-on:click  v-on:keyup

3、v-model:資料雙向繫結;用於表單輸入等;例如:<input v-model="message">

4、v-show:條件渲染指令,為DOM設定css的style屬性

5、v-if:條件渲染指令,動態在DOM內新增或刪除DOM元素

6、v-else:條件渲染指令,必須跟v-if成對使用

7、v-for:迴圈指令;例如:<li v-for="(item,index) in todos"></li>

8、v-else-if:判斷多層條件,必須跟v-if成對使用;

9、v-text:更新元素的textContent;例如:<span v-text="msg"></span> 等同於 <span>{{msg}}</span>;

10、v-html:更新元素的innerHTML;

11、v-pre:不需要表示式,跳過這個元素以及子元素的編譯過程,以此來加快整個專案的編譯速度;例如:<span v-pre>{{ this will not be compiled }}</span>;

12、v-cloak:不需要表示式,這個指令保持在元素上直到關聯例項結束編譯;

13、v-once:不需要表示式,只渲染元素或元件一次,隨後的渲染,元件/元素以及下面的子元素都當成靜態頁面不在渲染。