vue學習筆記(一)

內部指令

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 渲染時加載,完成後視爲靜態內容,跳出以後的渲染過程等等

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章