Vue所有指令

這是個人 我的博客，有興趣的能夠去看看，說不定有收穫。

動態參數

能夠用方括號括起來的 JavaScript 表達式做爲一個指令的參數：

<a v-bind:[attributeName]="url"> ... </a>

動態參數預期會求出一個字符串，異常狀況下值爲 null。這個特殊的 null 值能夠被顯性地用於移除綁定。任何其它非字符串類型的值都將會觸發一個警告。

動態參數表達式有一些語法約束，由於某些字符，例如空格和引號，放在 HTML 特性名裏是無效的。一樣，在 DOM 中使用模板時你須要迴避大寫鍵名。

---

vue.js默認的指令包括：

• v-if

  根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷燬並重建。若是元素是 <template> ，將提出它的內容做爲條件塊。當條件變化時該指令觸發過渡效果。

  當和 v-if 一塊兒使用時，v-for 的優先級比 v-if 更高。

• v-else

  爲 v-if 或者 v-else-if 添加「else 塊」。前一兄弟元素必須有 v-if 或 v-else-if。

• v-else-if

  表示 v-if 的 「else if 塊」。能夠鏈式調用。前一兄弟元素必須有 v-if 或 v-else-if。

• v-on

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

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

• v-bind

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

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

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

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

• v-for

  基於源數據屢次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression

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

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

  當和 v-if 一塊兒使用時，v-for 的優先級比 v-if 更高。

• v-show

  根據表達式之真假值，切換元素的 display CSS 屬性。當條件變化時該指令觸發過渡效果。

• v-once

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

  <!-- 單個元素 -->
  <span v-once>This will never change: {{msg}}</span>
  <!-- 有子元素 -->
  <div v-once>
    <h1>comment</h1>
    <p>{{msg}}</p>
  </div>
  <!-- 組件 -->
  <my-component v-once :comment="msg"></my-component>
  <!-- `v-for` 指令-->
  <ul>
    <li v-for="i in list" v-once>{{i}}</li>
  </ul>

• v-model

  在表單控件或者組件上建立雙向綁定。細節請看下面的教程連接。

  可用修飾符

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

• v-text

  更新元素的 textContent。若是要更新部分的 textContent ，須要使用 {{ Mustache }} 插值。

  <span v-text="msg"></span>
  <!-- 和下面的同樣 -->
  <span>{{msg}}</span>

• v-html

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

  在單文件組件裏，scoped 的樣式不會應用在 v-html 內部，由於那部分 HTML 沒有被 Vue 的模板編譯器處理。

• v-slot

  • 提供具名插槽或須要接收 prop 的插槽
  • 縮寫#
  • 只能用在template和組件上

• v-pre

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

  <span v-pre>{{ this will not be compiled }}</span>

• v-cloak

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