vue學習筆記(一)

內部指令

1.v-if (v-else)

v-if 是用來判斷是否加載 DOM 的,好比在判斷登陸狀態時能夠使用。css

2.v-show

v-show 是用來調整 css 中的 display 屬性的,而 DOM 已經加載html

v-if 和 v-show 的區別

  • v-if:判斷是否加載 DOM 元素,在須要時才加載,能夠減輕服務器壓力
  • v-show:調整 css 中的 display 屬性,相比 v-if 能夠使客戶端操做更加流暢

3.v-for

v-for 是循環渲染一組 data 中的數組,以 item in items 的形式遍歷vue

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 用於雙向數據綁定dom

7.v-bind

v-bind 用於動態綁定屬性,能夠綁定 css 樣式,src 值,自定義屬性等,能夠用 : 簡寫爲 :class="className".net

8.其餘指令

v=pre 在模板中跳過 vue 的變異,直接輸出原始值;htm

v-cloak 在 vue 渲染完指定的 dom 後才進行顯示,必須和 css 樣式 [v-cloak]{display:none} 一塊兒使用;事件

v-once 在第一次 dom 渲染時加載,完成後視爲靜態內容,跳出之後的渲染過程等等get

相關文章
相關標籤/搜索