vue 官網之指令

1.v-text

更新文字內容（textContent）。

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

v-text 可以防止{{}}出現在頁面上。

2.v-html

把 html 當成 html 渲染（innerHTML）。

<div v-html="html"></div>

3.v-show

根據表示式之真假值，切換元素的 display CSS property。

v-show 為 true 就顯示，若為false，相當於 display：‘none’，就隱藏 ，若項頻繁切換是否顯示的用 v-show。

<h1 v-show='isshow'>標籤一直都在</h1>
<button @click="isshow=!isshow">切換</button>

4.v-if

根據表示式的值的 truthiness 來有條件地渲染元素。在切換時元素及它的資料繫結 / 元件被銷燬並重建。如果元素是 <template>，將提出它的內容作為條件塊。

5.v-else

為 v-if 或者 v-else-if 新增“else 塊”。

6.v-else-if

表示 v-if 的“else if 塊”。可以鏈式呼叫。

v-if 為 true 標籤存在並顯示，若為 false，則刪除此標籤且顯示 v-else 中的內容。只顯示一次的時候使用。

<h1 v-if='islogin'>Simba</h1>
<h1 v-else>請登入</h1>
<button @click='islogin=!islogin'>{{islogin?'退出':'登入'}}</button>

7.v-for

基於源資料多次渲染元素或模板塊。

<div v-for='(item ,index) in list'>
  {{ i+1 }}、{{ item }}
  <button @click='del(index)'>刪除</button>
</div>

8.v-on

繫結事件監聽器。事件型別由引數指定。表示式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

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

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 動態事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

在監聽原生 DOM 事件時，方法以事件為唯一的引數。如果使用內聯語句，語句可以訪問一個 $event

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

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

<!-- 動態事件縮寫 (2.6.0+) -->
<button @[event]="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 開始，v-on 同樣支援不帶引數繫結一個事件/監聽器鍵值對的物件。注意當使用物件語法時，是不支援任何修飾器的。

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

使用修飾符時，順序很重要：

v-on:click.prevent.self 會阻止所有的點選，而v-on:click.self.prevent 只會阻止對元素自身的點選。

.passive - (2.3.0) 以 { passive: true } 模式新增偵聽器

passive 一般用在滾動監聽，如：@scroll 、 @touchmove，因為滾動監聽過程中，移動每個畫素都會產生一次事件，每次都使用核心查詢 prevent 會使滑動卡頓。我們通過 passive 將核心執行緒查詢跳過，可大大提升滑動的流暢度。

9.v-bind

動態地繫結一個或多個 attribute，或一個元件 prop 到表示式。

在繫結 class 或 style attribute 時，支援其它型別的值，如陣列或物件；在繫結 prop 時，prop 必須在子元件中宣告。可以用修飾符指定不同的繫結型別。

沒有引數時，可以繫結到一個包含鍵值對的物件。注意此時 class 和 style 繫結不支援陣列和物件。

<!-- 繫結一個 attribute -->
<img v-bind:src="imageSrc">

<!-- 動態 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

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

<!-- 動態 attribute 名縮寫 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 內聯字串拼接 -->
<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>

<!-- 繫結一個全是 attribute 的物件 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通過 prop 修飾符繫結 DOM attribute -->
<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>

.camel 修飾符允許在使用 DOM 模板時將 v-bind property 名稱駝峰化，例如 SVG 的 viewBox property：

<svg :view-box.camel="viewBox"></svg>

10.v-model

在表單控制元件或者元件上建立雙向繫結。

資料變化，檢視也會變化，檢視變化從而資料也會發生變化。

修飾符：

.lazy - 取代 input 監聽 change 事件

.number - 輸入字串轉為有效的數字

.trim - 輸入首尾空格過濾

11.v-slot

提供具名插槽或需要接收 prop 的插槽。

<!-- 匿名插槽(沒有命名，有且只有一個) -->
<todo-list>
  <template v-slot:default>default slot</template>
</todo-list>
<slot>default</slot>

<!-- 具名插槽：相對匿名插槽元件 slot 標籤待 name 命名的 -->
<base-layout>
  <template v-slot:header>Header content</template>
  Default slot content
  <template v-slot:footer>Footer content</template>
</base-layout>
<slot name="header">header</slot>

作用域插槽：子元件內資料可以被父頁面拿到（解決資料只能從父頁面傳遞給子元件）

slotProps: 可以隨意命名，接收的是子元件 slot 標籤上，屬性資料的集合。

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.user.firstName }}
    </div>
  </template>
</infinite-scroll>
<slot name='item' :user='user'>
  {{ user.lastName }} // 預設資料
</slot>
data () {
  return {
    user: {
      firstName: 'zhang',
      lastName: 'san'
    }
  }
}

 

<!-- 接收 prop 的預設插槽，使用瞭解構 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

<!-- 動態插槽名 -->
<base-layout>
  <template v-slot:[dynamicSlotName]>...</template>
</base-layout>

12.v-pre

vue 是響應式系統，有些靜態的標籤不需要多次編譯，這樣可以節省效能。

<span v-pre>{{ msg }}</span>

即使 data 裡面定義了 msg，這裡仍然是顯示 {{ msg }}。

13.v-cloak

在網速慢的情況下，在使用 vue 繫結資料時，渲染頁面時會出現變數閃爍。這個指令保持在元素上直到關聯例項結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到例項準備完畢。

這樣可以解決變數閃爍，但會出現白屏，你可以結合使用骨架屏。

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

14.v-once

只渲染元素和元件一次。當資料再次發生變化，隨後的重新渲染，元素、元件及其所有的子節點將被視為靜態內容，導致頁面不會更新。這個可以用於優化更新效能。

通過 v-once 只需要渲染一次，可以降低開銷的靜態元件。

v-pre、v-cloak、v-once 三個指令都是用來優化效能體驗的。

v-pre：不進行編譯，直接渲染

v-cloak：隱藏未編譯的 Mustache 標籤直到例項準備完畢

v-once：只渲染一次就不更新了