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