內部指令
1.v-if (v-else)
v-if 是用來判斷是否加載 DOM 的,比如在判斷登錄狀態時可以使用。
2.v-show
v-show 是用來調整 css 中的 display 屬性的,而 DOM 已經加載
v-if 和 v-show 的區別
- v-if:判斷是否加載 DOM 元素,在需要時才加載,可以減輕服務器壓力
- v-show:調整 css 中的 display 屬性,相比 v-if 可以使客戶端操作更加流暢
3.v-for
v-for 是循環渲染一組 data 中的數組,以 item in items 的形式遍歷
4.v-text&v-html
v-text 類似於 jq 的 text() 方法,v-html 類似於 jq 的 html() 方法,我們使用插值 {{}} 的時候,是有弊端的,如果網速慢或者 js 出錯時,會暴露我們的 {{xxx}},v-text 就是爲了避免這一問題
5.v-on
v-on 用來綁定事件,例如 v-on:click="add" 給 元素添加一個 add 方法,v-on:keyup=“reduce” 給元素添加一個鍵盤事件等,可以簡寫成 @click 和 @keyup
6.v-model
v-model 用於雙向數據綁定
7.v-bind
v-bind 用於動態綁定屬性,可以綁定 css 樣式,src 值,自定義屬性等,可以用 : 簡寫爲 :class="className"
8.其他指令
v=pre 在模板中跳過 vue 的變異,直接輸出原始值;
v-cloak 在 vue 渲染完指定的 dom 後才進行顯示,必須和 css 樣式 [v-cloak]{display:none} 一起使用;
v-once 在第一次 dom 渲染時加載,完成後視爲靜態內容,跳出以後的渲染過程等等