1. 基本模板語法

1.1 插值

文本

• 數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值
• v-text 指令也可以用于數據綁定，如果要更新部分的 textContent ，需要使用 插值。
• 通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新

原始HTML

雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令

你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。

屬性

• Mustache語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令
• 在布爾屬性的情況下，它們的存在即暗示為 true， 如果值是 null、undefined 或 false，則屬性不會被包含在渲染出來的

使用JavaScript表達式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

防止刷新或加載閃爍

<style>
    [v-cloak] {
          display: none !important;
    }
</style>

<div v-cloak>
  {{ message }}
</div>

• v-cloak并不需要添加到每個標簽，只要在el掛載的標簽上添加就可以

1.2 指令

指令

• 指令 (Directives) 是帶有 v- 前綴的特殊屬性。
• 指令特性的值預期是單個 JavaScript 表達式
• 指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM。

指令列表

• v-text
• v-html
• v-show
• v-if
• v-else
• v-else-if
• v-for
• v-on
• v-bind
• v-model
• v-pre
• v-cloak
• v-once

縮寫

v-bind縮寫

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

v-on縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

2. 條件渲染與列表渲染

2.1 條件渲染

相關指令

• v-if
• v-else
• v-else-if

控制多個元素

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

復用已有元素

• Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染
• 要想每次都重新渲染，只需添加一個具有唯一值的 key 屬性

v-show

<h1 v-show="ok">Hello!</h1>

與 v-if 的區別

• v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
• v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
• 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

2.2 列表渲染

遍歷數組

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

v-for 還支持一個可選的第二個參數為當前項的索引

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

遍歷對象

<!-- 只取值 -->
<li v-for="value in object">
  {{ value }}
</li>

<!-- 值、屬性名 -->
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

<!--值、屬性名、索引-->
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

key

• 當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。
• 這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態 的列表渲染輸出。
• 為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。因為在遍歷，需要用 v-bind 來綁定動態值
• 建議盡可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。

更新檢測

數組

由于 JavaScript 的限制，Vue 不能檢測以下變動的數組：

? 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue 當你修改數組的長度時，例如：vm.items.length = newLength

對象

還是由于 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除

方法

• Vue.set()
• vm.$set()

遍歷數字

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

v-for on <tmplate>

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-for 和 v-if

當它們處于同一節點，v-for 的優先級比 v-if 更高，這意味著 v-if 將分別重復運行于每個 v-for 循環中。

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

3 樣式

3.1 綁定HTML Class

對象語法

<div v-bind:class="{ active: isActive }"></div>
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<div v-bind:class="classObject"></div>

數組語法

<div v-bind:class="[activeClass, errorClass]"></div>

3.2 綁定內聯樣式

對象語法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>

數組語法

數組語法可以將多個樣式對象應用到同一個元素上

div v-bind:style="[baseStyles, overridingStyles]"></div>

自動添加前綴

當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應的前綴。

多重值

從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數組，常用于提供多個帶前綴的值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

這樣寫只會渲染數組中最后一個被瀏覽器支持的值。在本例中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那么就只會渲染 display: flex。

4. 事件

4.1 事件綁定

監聽事件

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

事件處理方法

<div id="example-2">
  <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

內聯調用方法

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

4.2 事件修飾符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止單擊事件繼續傳播 阻止事件冒泡-->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 阻止默認事件-->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件將只會觸發一次 2.1.4新增-->
<a v-on:click.once="doThis"></a>

<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 2.3.0新增-->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<!--.passive 修飾符尤其能夠提升移動端的性能。-->
<div v-on:scroll.passive="onScroll">...</div>

4.3 按鍵修飾符

數字

<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">

按鍵別名

<!-- 回車鍵 -->
<input v-on:keyup.enter="submit">

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

4.4 系統修飾鍵

可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。

• .ctrl
• .alt
• .shift
• .meta

注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (?)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (?)。在 Sun 操作系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其后繼產品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標記為“META”。在 Symbolics 鍵盤上，meta 被標記為“META”或者“Meta”。

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

5 表單輸入綁定

你可以用 v-model 指令在表單 <input> 及 <textarea> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。

5.1 基礎用法

文本

<input v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>

復選框

單個復選框，綁定到布爾值：

<input type="checkbox" id="checkbox" v-model="checked">

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

多個復選框，綁定到同一個數組

<div id='example'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

單選按鈕

綁定value對應的字符串

<div id="example">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

選擇框

單選，綁定對應所選的值

<div id="example">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

多選時 ，綁定到一個數組

<div id="example">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

5.2 修飾符

.lazy

在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步

添加 lazy 修飾符，從而轉變為使用 change 事件進行同步

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >

.number

如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符

<input v-model.number="age" type="number">

.trim

自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符

<input v-model.trim="msg">