vue入門筆記體系（五）vue指令

vue指令

指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。

• v-text

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

• v-html

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

• v-show

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

• v-if

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

• v-else

//不須要表達式
//限制：前一兄弟元素必須有 v-if 或 v-else-if。
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

• v-else-if

//限制：前一兄弟元素必須有 v-if 或 v-else-if。
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

• v-for

//基於源數據屢次渲染元素或模板塊。此指令之值，必須使用特定語法 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 的特殊屬性：
//key做爲惟一標示，能夠讀取緩存，性能開銷比較小，
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

• v-on

//v-on,縮寫@
修飾符：

.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 } 模式添加偵聽器
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>

<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 中止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默認行爲 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默認行爲，沒有表達式 -->
<form @submit.prevent></form>

<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>

<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

• v-bind

//縮寫 :
修飾符：

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

<!-- 縮寫 -->
<img :src="imageSrc">

<!-- 內聯字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 經過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 綁定。「prop」必須在 my-component 中聲明。-->
<my-component :prop="someThing"></my-component>

<!-- 經過 $props 將父組件的 props 一塊兒傳給子組件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

• v-model

<input>
<select>
<textarea>
components
修飾符：

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

• v-pre

//不須要表達式

//用法：

//跳過這個元素和它的子元素的編譯過程。能夠用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
<span v-pre>{{ this will not be compiled }}</span>

• v-cloak

//不須要表達式，用webpack時不須要

//用法：

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

• 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>