vue視圖

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