Vue.js入門教程-指令

1、指令

1.1 概念理解

指令 (Directives) 是特殊的帶有前綴 v- 的特性。指令的值限定爲 綁定表達式（JavaScript 表達式及過濾器規則）。指令的職責就是當其表達式的值改變時把某些特殊的行爲應用到 DOM 上。

1.2 示例

（1）v- 是Vue的前綴，text 是指令ID，msg 是 expression（表達式）。

（2）msg 是MVVM中的VM即ViewModel，當他的值改變時，就會觸發指令 test，更改View視圖的顯示。

2、v-text

更新元素的 textContent（文本內容）

3、v-html

更新元素的 innerHTML

3.1 注意

v-html 能夠讀取html標籤，但 v-text 不能夠。

4、v-show 和 v-if

4.1 v-show

根據表達式之真假值，切換元素的 display CSS 屬性

DIV1 的表達式是假值，元素隱藏；DIV2 的表達式是真值，元素顯示。

4.2 v-if

根據表達式的值的真假條件，銷燬或重建渲染元素

v-if 和 v-show 的用法基本相同，參考 v-show 的用法。

4.3 v-if 和 v-show 的比較

（1）v-if 是「真實」的條件渲染，由於它會確保條件塊(conditional block)在切換的過程當中，完整地銷燬(destroy)和從新建立(re-create)條件塊內的事件監聽器和子組件。

（2）v-if 是惰性的(lazy)：若是在初始渲染時條件爲 false，不會執行任何操做 - 在條件第一次變爲 true 時，纔開始渲染條件塊。

（3）相比之下，v-show 要簡單得多 - 無論初始條件如何，元素始終渲染，而且只是基於 CSS 的切換。

（4）一般來講，v-if 在切換時有更高的性能開銷，而 v-show 在初始渲染時有更高的性能開銷。所以，若是須要頻繁切換，推薦使用 v-show，若是條件在運行時改變的可能性較少，推薦使用 v-if。

5、v-else

5.1 限制

前一兄弟元素必須有 v-if 或 v-else-if。

若是 v-if/v-show 指令的表達式爲 true，則 else 元素不顯示；若是 v-if/v-show 指令的表達式爲 false，則else 元素顯示。

6、v-else-if

6.1 限制

前一兄弟元素必須有 v-if 或 v-else-if。

表示 v-if 的 「else if 塊」。能夠鏈式調用。

7、v-for

基於源數據 屢次渲染元素或模板塊（JavaScript的遍歷）

7.1 特色語法

v-for 指令必須使用特定的語法 alias in expression，爲當前遍歷的元素提供別名

items 是一個數組，item 是當前被遍歷的數組元素。

7.2 示例

咱們在選項對象的 data 屬性中定義了一個 books 數組，而後在 #vue-app 元素內使用 v-for 遍歷books 數組，輸出每一個 book 對象的書籍、做者和譯者。

8、v-on

綁定事件監聽器。事件類型由參數指定。表達式能夠是一個方法的名字或一個內聯語句，若是沒有修飾符也能夠省略。

8.1 示例

8.2 事件修飾符

（1）.stop - 調用 event.stopPropagation()。

（2）.prevent - 調用 event.preventDefault()。

（3）.capture - 添加事件偵聽器時使用 capture 模式。

（4）.self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。

（5）.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。

（6）.native - 監聽組件根元素的原生事件。

（7）.once - 只觸發一次回調。

（8）.left - (2.2.0) 只當點擊鼠標左鍵時觸發。

（9）.right - (2.2.0) 只當點擊鼠標右鍵時觸發。

（10）.middle - (2.2.0) 只當點擊鼠標中鍵時觸發。

（11）.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器

9、v-bind

當表達式的值改變時，將其產生的影響，響應式地做用於 DOM。

10、v-model

在表單控件或者組件上建立 雙向綁定，監聽用戶的輸入事件以更新數據。

10.1 限制

（1）<input>

（2）<select>

（3）<textarea>

（4）components

10.2 示例

更多系列文章在GitHub地址

閱讀更多 (๑╹ヮ╹๑)ﾉ Studying makes me happy

參考文章

（1）Vue.js API

（2）vue 指令基本使用大全