vue — 指令

vue指令特性

vue指令：當表達式改變時，將某些行爲應用到DOM上。
指令 (Directives) 是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式 (v-for 是例外狀況，稍後咱們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

指令參數
一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。例如，v-bind 指令能夠用於響應式地更新 HTML 屬性：

<a v-bind:href="url">...</a>  //在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。
<a v-on:click="doSomething">...</a> //用於監聽 DOM 事件：click表示監聽單擊事件

指令修飾符
修飾符 (Modifiers) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()

語法糖
v-bind 縮寫爲：
v-on 縮寫爲@

vue指令有哪些

v-text

預期值：Sting類型
操做元素中的純文本，綁定data中的數據，數據改變時，會隨之改變

v-html

預期值：Sting類型
更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯 。若是試圖使用 v-html 組合模板，能夠從新考慮是否經過使用組件來替代。

在網站上動態渲染任意 HTML 是很是危險的，由於容易致使 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。

在單文件組件裏，scoped 的樣式不會應用在 v-html 內部，由於那部分 HTML 沒有被 Vue 的模板編譯器處理。若是你但願針對 v-html 的內容設置帶做用域的 CSS，你能夠替換爲 CSS Modules 或用一個額外的全局 <style> 元素手動設置相似 BEM 的做用域策略。（不太懂）

渲染數據 —— {{}}、v-text、vue-html的區別

• {{}}、v-text綁定數據中的text值
• v-html當綁定數據爲html元素時，不會渲染元素，直接顯示字符串。

{{}}：書寫比較方便，但其也有必定的弊端，好比讓網速慢，或者數據加載失敗的時候會在瀏覽器中直接渲染插值，好比{{msg}}。或者說，當JavaScript報錯，也會有相似現象。

v-show：

預期值類型：任意
根據表達式之真假值，切換元素的 display CSS 屬性；
帶有v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-if

預期值：任意
根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷燬並重建。若是元素是 <template> ，將提出它的內容做爲條件塊。

在 <template> 元素上使用 v-if 條件渲染分組

由於 v-if 是一個指令，因此必須將它添加到一個元素上。可是若是想切換多個元素呢？此時能夠把一個 <template> 元素當作不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。

v-if vs v-show

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

v-else-if

v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素以後。

v-else

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。

v-for

預期值：Array | Object | number | string（值類型）

使用範圍

基於源數據屢次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression ，爲當前遍歷的元素提供別名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也能夠爲數組索引指定別名 (或者用於對象的鍵)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

還能夠便利輸出數字

v-for 默認行爲試着不改變總體，而是替換元素。迫使其從新排序的元素，你須要提供一個 key 的特殊屬性：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

v-for on a <template>

相似於 v-if，你也能夠利用帶有 v-for 的 <template> 渲染多個元素。好比：

<ul>
<template v-for="item in items">

<li>{{ item.msg }}</li>
<li class="divider"></li>

</template>
</ul>

v-for with v-if

當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。當你想爲僅有的一些項渲染節點時，這種優先級的機制會十分有用，以下：

<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

v-on

預期值：Function | Inline Statement | Object
參數：event
修飾符：

• .stop - 調用 event.stopPropagation()。 .prevent - 調用
• event.preventDefault()。 .capture - 添加事件偵聽器時使用 capture 模式。 .self -
  只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。 .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
• .native - 監聽組件根元素的原生事件。 .once - 只觸發一次回調。 .left - (2.2.0) 只當點擊鼠標左鍵時觸發。
• .right - (2.2.0) 只當點擊鼠標右鍵時觸發。 .middle - (2.2.0) 只當點擊鼠標中鍵時觸發。 - -
• .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器

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

用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也能夠監聽子組件觸發的自定義事件。

在監聽原生 DOM 事件時，方法以事件爲惟一的參數。若是使用內聯語句，語句能夠訪問一個 $event 屬性：v-on:click="handle('ok', $event)"。

從 2.4.0 開始，v-on 一樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。

v-bind

預期值：any (with argument) | Object (without argument)
參數：attrOrProp (optional)
修飾符：

- .prop - 被用於綁定 DOM 屬性 (property)。(差異在哪裏？)
- .camel - (2.1.0+) 將 kebab-case 特性名轉換爲 camelCase. (從 2.1.0 開始支持)
- .sync (2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的 v-on 偵聽器。

用法：

動態地綁定一個或多個特性，或一個組件 prop 到表達式。

在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。能夠經過下面的教程連接查看詳情。

在綁定 prop 時，prop 必須在子組件中聲明。能夠用修飾符指定不一樣的綁定類型。

沒有參數時，能夠綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。

v-model

在表單控件或者組件上建立雙向綁定。
預期：隨表單控件類型不一樣而不一樣。
限制：

<input>--》實現單選和多選
<select>--》實現下拉框單選和多選
<textarea>
components

修飾符：

.lazy - 取代 input 監聽 change 事件
.number - 輸入字符串轉爲數字
.trim - 輸入首尾空格過濾

具體使用方法：https://cn.vuejs.org/v2/guide...

v-pre

不須要表達式

用法：

跳過這個元素和它的子元素的編譯過程。能夠用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。

v-cloak

不須要表達式

用法：

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一塊兒用時，這個指令能夠隱藏未編譯的 Mustache 標籤直到實例準備完畢。

v-once

不須要表達式

詳細：

只渲染元素和組件一次。隨後的從新渲染，元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。

儘管在 Vue 中渲染 HTML 很快，不過當組件中包含大量靜態內容時，能夠考慮使用 v-once 將渲染結果緩存起來，就像這樣：