# VUE API 官方文檔
[TOC]
## 全局配置
`Vue.config`?是一個對象，包含 Vue 的全局配置。可以在啟動應用之前修改下列屬性：
### silent
* 類型：`boolean`
* 默認值：`false`
* 用法：
```
Vue.config.silent = true
```
取消 Vue 所有的日志與警告。
### optionMergeStrategies
* 類型：`{ key: string: Function }`
* 默認值：`{}`
* 用法：
```
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
})
// Profile.options._my_option = 2
```
自定義合并策略的選項。
合并策略選項分別接收在父實例和子實例上定義的該選項的值作為第一個和第二個參數，Vue 實例上下文被作為第三個參數傳入。
* 參考?自定義選項的混入策略
### devtools
* 類型：`boolean`
* 默認值：`true`?(生產版為?`false`)
* 用法：
```
// 務必在加載 Vue 之后，立即同步設置以下內容
Vue.config.devtools = true
```
配置是否允許?vue-devtools
### errorHandler
* 類型：`Function`
* 默認值：`undefined`
* 用法：
```
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` 是 Vue 特定的錯誤信息，比如錯誤所在的生命周期鉤子
// 只在 2.2.0+ 可用
}
```
指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時，可獲取錯誤信息和 Vue 實例。
> 從 2.2.0 起，這個鉤子也會捕獲組件生命周期鉤子里的錯誤。同樣的，當這個鉤子是?`undefined`?時，被捕獲的錯誤會通過?`console.error`?輸出而避免應用崩潰。
> 從 2.4.0 起這個鉤子也會捕獲 Vue 自定義事件處理函數內部的錯誤了。
> 錯誤追蹤服務?Sentry
### warnHandler
> 2.4.0 新增
* 類型：`Function`
* 默認值：`undefined`
* 用法：
```
Vue.config.warnHandler = function (msg, vm, trace) {
// `trace` 是組件的繼承關系追蹤
}
```
為 Vue 的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效，在生產環境下它會被忽略。
### ignoredElements
* 類型：`Array<string | RegExp>`
* 默認值：``
* 用法：
```
Vue.config.ignoredElements =
'my-custom-web-component',
'another-web-component',
// 用一個 `RegExp` 忽略所有“ion-”開頭的元素
// 僅在 2.5+ 支持
/^ion-/
```
須使 Vue 忽略在 Vue 之外的自定義元素 (e.g. 使用了 Web Components APIs)。否則，它會假設你忘記注冊全局組件或者拼錯了組件名稱，從而拋出一個關于?`Unknown custom element`?的警告。
### keyCodes
* 類型：`{ key: string: number | Array<number> }`
* 默認值：`{}`
* 用法：
```
Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase 不可用
mediaPlayPause: 179,
// 取而代之的是 kebab-case 且用雙引號括起來
"media-play-pause": 179,
up: 38, 87
}
```
```
input type="text" @keyup.media-play-pause="method">
```
給?`v-on`?自定義鍵位別名。
### performance
> 2.2.0 新增
* 類型：`boolean`
* 默認值：`false (自 2.2.3 起)`
* 用法：
設置為?`true`?以在瀏覽器開發工具的性能/時間線面板中啟用對組件初始化、編譯、渲染和打補丁的性能追蹤。只適用于開發模式和支持?`performance.mark`
### productionTip
> 2.2.0 新增
* 類型：`boolean`
* 默認值：`true`
* 用法：
設置為?`false`?以阻止 vue 在啟動時生成生產提示。
## 全局 API
### Vue.extend( options )
* 參數：
* `{Object} options`
* 用法：
使用基礎 Vue 構造器，創建一個“子類”。參數是一個包含組件選項的對象。
`data`?選項是特例，需要注意 - 在?`Vue.extend()`?中它必須是函數
```
div id="mount-point">div>
```
```
// 創建構造器
var Profile = Vue.extend({
template: '{{firstName}} {{lastName}} aka {{alias}}',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 創建 Profile 實例，并掛載到一個元素上。
new Profile().$mount('#mount-point')
```
結果如下：
```
p>Walter White aka Heisenbergp>
```
* 參考：組件
### Vue.nextTick( callback, context )
* 參數：
* `{Function} callback`
* `{Object} context`
* 用法：
在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
```
// 修改數據
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
// DOM 更新了
})
// 作為一個 Promise 使用 (2.1.0 起新增，詳見接下來的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})
```
> 2.1.0 起新增：如果沒有提供回調且在支持 Promise 的環境中，則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill，所以如果你的目標瀏覽器不原生支持 Promise (IE：你們都看我干嘛)，你得自己提供 polyfill。
### Vue.set( target, key, value )
* 參數：
* `{Object | Array} target`
* `{string | number} key`
* `{any} value`
* 返回值：設置的值。
* 用法：
向響應式對象中添加一個屬性，并確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用于向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性 (比如?`this.myObject.newProperty = 'hi'`)
注意對象不能是 Vue 實例，或者 Vue 實例的根數據對象。
### Vue.delete( target, key )
* 參數：
* `{Object | Array} target`
* `{string | number} key/index`
> 僅在 2.2.0+ 版本中支持 Array + index 用法。
* 用法：
刪除對象的屬性。如果對象是響應式的，確保刪除能觸發更新視圖。這個方法主要用于避開 Vue 不能檢測到屬性被刪除的限制，但是你應該很少會使用它。
> 在 2.2.0+ 中同樣支持在數組上工作。
目標對象不能是一個 Vue 實例或 Vue 實例的根數據對象。
### Vue.directive( id, definition )
* 參數：
* `{string} id`
* `{Function | Object} definition`
* 用法：
注冊或獲取全局指令。
```
// 注冊
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注冊 (指令函數)
Vue.directive('my-directive', function () {
// 這里將會被 `bind` 和 `update` 調用
})
// getter，返回已注冊的指令
var myDirective = Vue.directive('my-directive')
```
* 參考：自定義指令
### Vue.filter( id, definition )
* 參數：
* `{string} id`
* `{Function} definition`
* 用法：
注冊或獲取全局過濾器。
```
// 注冊
Vue.filter('my-filter', function (value) {
// 返回處理后的值
})
// getter，返回已注冊的過濾器
var myFilter = Vue.filter('my-filter')
```
* 參考：過濾器
### Vue.component( id, definition )
* 參數：
* `{string} id`
* `{Function | Object} definition`
* 用法：
注冊或獲取全局組件。注冊還會自動使用給定的`id`設置組件的名稱
```
// 注冊組件，傳入一個擴展過的構造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注冊組件，傳入一個選項對象 (自動調用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 獲取注冊的組件 (始終返回構造器)
var MyComponent = Vue.component('my-component')
```
* 參考：組件
### Vue.use( plugin )
* 參數：
* `{Object | Function} plugin`
* 用法：
安裝 Vue.js 插件。如果插件是一個對象，必須提供?`install`?方法。如果插件是一個函數，它會被作為 install 方法。install 方法調用時，會將 Vue 作為參數傳入。
該方法需要在調用?`new Vue()`?之前被調用。
當 install 方法被同一個插件多次調用，插件將只會被安裝一次。
* 參考：插件
### Vue.mixin( mixin )
* 參數：
* `{Object} mixin`
* 用法：
全局注冊一個混入，影響注冊之后所有創建的每個 Vue 實例。插件作者可以使用混入，向組件注入自定義的行為。不推薦在應用代碼中使用。
* 參考：全局混入
### Vue.compile( template )
* 參數：
* `{string} template`
* 用法：
在 render 函數中編譯模板字符串。只在獨立構建時有效
```
var res = Vue.compile('{{ msg }}')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
```
* 參考：渲染函數
### Vue.version
* 細節：提供字符串形式的 Vue 安裝版本號。這對社區的插件和組件來說非常有用，你可以根據不同的版本號采取不同的策略。
* 用法：
```
var version = Number(Vue.version.split('.')0)
if (version === 2) {
// Vue v2.x.x
} else if (version === 1) {
// Vue v1.x.x
} else {
// Unsupported versions of Vue
}
```
## 選項 / 數據
### data
* 類型：`Object | Function`
* 限制：組件的定義只接受?`function`。
* 詳細：
Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對)：瀏覽器 API 創建的原生對象，原型上的屬性會被忽略。大概來說，data 應該只能是數據 - 不推薦觀察擁有狀態行為的對象。
一旦觀察過，不需要再次在數據對象上添加響應式屬性。因此推薦在創建實例之前，就聲明所有的根級響應式屬性。
實例創建之后，可以通過?`vm.$data`?訪問原始數據對象。Vue 實例也代理了 data 對象上所有的屬性，因此訪問?`vm.a`?等價于訪問?`vm.$data.a`。
以?`_`?或?`$`?開頭的屬性?不會?被 Vue 實例代理，因為它們可能和 Vue 內置的屬性、API 方法沖突。你可以使用例如?`vm.$data._property`?的方式訪問這些屬性。
當一個組件被定義，`data`?必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果?`data`?仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！通過提供?`data`?函數，每次創建一個新實例后，我們能夠調用?`data`?函數，從而返回初始數據的一個全新副本數據對象。
如果需要，可以通過將?`vm.$data`?傳入?`JSON.parse(JSON.stringify(...))`?得到深拷貝的原始數據對象。
* 示例：
```
var data = { a: 1 }
// 直接創建一個實例
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必須是函數
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
```
注意，如果你為?`data`?屬性使用了箭頭函數，則?`this`?不會指向這個組件的實例，不過你仍然可以將其實例作為函數的第一個參數來訪問。
```
data: vm => ({ a: vm.myProp })
```
### props
* 類型：`Array<string> | Object`
* 詳細：
props 可以是數組或對象，用于接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義校驗和設置默認值。
* 示例：
```
// 簡單語法
Vue.component('props-demo-simple', {
props: 'size', 'myMessage'
})
// 對象語法，提供校驗
Vue.component('props-demo-advanced', {
props: {
// 檢測類型
height: Number,
// 檢測類型 + 其他驗證
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
```
* 參考：Props
### propsData
* 類型：`{ key: string: any }`
* 限制：只用于?`new`?創建的實例中。
* 詳細：
創建實例時傳遞 props。主要作用是方便測試。
* 示例：
```
var Comp = Vue.extend({
props: 'msg',
template: '{{ msg }}'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
```
### computed
* 類型：`{ key: string: Function | { get: Function, set: Function } }`
* 詳細：
計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。
注意如果你為一個計算屬性使用了箭頭函數，則?`this`?不會指向這個組件的實例，不過你仍然可以將其實例作為函數的第一個參數來訪問。
```
computed: {
aDouble: vm => vm.a * 2
}
```
計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。注意，如果某個依賴 (比如非響應式屬性) 在該實例范疇之外，則計算屬性是不會被更新的。
* 示例：
```
var vm = new Vue({
data: { a: 1 },
computed: {
// 僅讀取
aDouble: function () {
return this.a * 2
},
// 讀取和設置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
```
* 參考：計算屬性
### methods
* 類型：`{ key: string: Function }`
* 詳細：
methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的?`this`?自動綁定為 Vue 實例。
注意，不應該使用箭頭函數來定義 method 函數?(例如?`plus: () => this.a++`)。理由是箭頭函數綁定了父級作用域的上下文，所以?`this`?將不會按照期望指向 Vue 實例，`this.a`?將是 undefined。
* 示例：
```
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
```
* 參考：事件處理器
### watch
* 類型：`{ key: string: string | Function | Object | Array }`
* 詳細：
一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用?`$watch()`，遍歷 watch 對象的每一個屬性。
* 示例：
```
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 該回調將會在偵聽開始之后被立即調用
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e:
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
,
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
```
注意，不應該使用箭頭函數來定義 watcher 函數?(例如?`searchQuery: newValue => this.updateAutocomplete(newValue)`)。理由是箭頭函數綁定了父級作用域的上下文，所以?`this`?將不會按照期望指向 Vue 實例，`this.updateAutocomplete`?將是 undefined。
* 參考：實例方法 / 數據 - vm.$watch
## 選項 / DOM
### el
* 類型：`string | HTMLElement`
* 限制：只在由?`new`?創建的實例中遵守。
* 詳細：
提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例。
在實例掛載之后，元素可以用?`vm.$el`?訪問。
如果在實例化時存在這個選項，實例將立即進入編譯過程，否則，需要顯式調用?`vm.$mount()`?手動開啟編譯。
提供的元素只能作為掛載點。不同于 Vue 1.x，所有的掛載元素會被 Vue 生成的 DOM 替換。因此不推薦掛載 root 實例到?`<html>`?或者?`<body>`?上。
如果?`render`?函數和?`template`?屬性都不存在，掛載 DOM 元素的 HTML 會被提取出來用作模板，此時，必須使用 Runtime + Compiler 構建的 Vue 庫。
* 參考：
* 生命周期圖示
* 運行時 + 編譯器 vs. 只包含運行時
### template
* 類型：`string`
* 詳細：
一個字符串模板作為 Vue 實例的標識使用。模板將會?替換?掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽。
如果值以?`#`?開始，則它將被用作選擇符，并使用匹配元素的 innerHTML 作為模板。常用的技巧是用?`<script type="x-template">`?包含模板。
出于安全考慮，你應該只使用你信任的 Vue 模板。避免使用其他人生成的內容作為你的模板。
如果 Vue 選項中包含渲染函數，該模板將被忽略。
* 參考：
* 生命周期圖示
* 用插槽分發內容
### render
* 類型：`(createElement: () => VNode) => VNode`
* 詳細：
字符串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。該渲染函數接收一個?`createElement`?方法作為第一個參數用來創建?`VNode`。
如果組件是一個函數組件，渲染函數還會接收一個額外的?`context`?參數，為沒有實例的函數組件提供上下文信息。
Vue 選項中的?`render`?函數若存在，則 Vue 構造函數不會從?`template`?選項或通過?`el`?選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數。
* 參考：渲染函數
### renderError
> 2.2.0 新增
* 類型：`(createElement: () => VNode, error: Error) => VNode`
* 詳細：
只在開發者環境下工作。
當?`render`?函數遭遇錯誤時，提供另外一種渲染輸出。其錯誤將會作為第二個參數傳遞到?`renderError`。這個功能配合 hot-reload 非常實用。
* 示例：
```
new Vue({
render (h) {
throw new Error('oops')
},
renderError (h, err) {
return h('pre', { style: { color: 'red' }}, err.stack)
}
}).$mount('#app')
```
* 參考：渲染函數
## 選項 / 生命周期鉤子
所有的生命周期鉤子自動綁定?`this`?上下文到實例中，因此你可以訪問數據，對屬性和方法進行運算。這意味著你不能使用箭頭函數來定義一個生命周期方法?(例如?`created: () => this.fetchTodos()`)。這是因為箭頭函數綁定了父上下文，因此?`this`?與你期待的 Vue 實例不同，`this.fetchTodos`?的行為未定義。
### beforeCreate
* 類型：`Function`
* 詳細：
在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
* 參考：生命周期圖示
### created
* 類型：`Function`
* 詳細：
在實例創建完成后被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，`$el`?屬性目前不可見。
* 參考：生命周期圖示
### beforeMount
* 類型：`Function`
* 詳細：
在掛載開始之前被調用：相關的?`render`?函數首次被調用。
該鉤子在服務器端渲染期間不被調用。
* 參考：生命周期圖示
### mounted
* 類型：`Function`
* 詳細：
`el`?被新創建的?`vm.$el`?替換，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素，當?`mounted`?被調用時?`vm.$el`?也在文檔內。
注意?`mounted`?不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用?vm.$nextTick
```
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
```
該鉤子在服務器端渲染期間不被調用。
* 參考：生命周期圖示
### beforeUpdate
* 類型：`Function`
* 詳細：
數據更新時調用，發生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。
該鉤子在服務器端渲染期間不被調用，因為只有初次渲染會在服務端進行。
* 參考：生命周期圖示
### updated
* 類型：`Function`
* 詳細：
由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。
當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性
注意?`updated`?不會承諾所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以用?vm.$nextTick
```
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
```
該鉤子在服務器端渲染期間不被調用。
* 參考：生命周期圖示
### activated
* 類型：`Function`
* 詳細：
keep-alive 組件激活時調用。
該鉤子在服務器端渲染期間不被調用。
* 參考：
* 構建組件 - keep-alive
* 動態組件 - keep-alive
### deactivated
* 類型：`Function`
* 詳細：
keep-alive 組件停用時調用。
該鉤子在服務器端渲染期間不被調用。
* 參考：
* 構建組件 - keep-alive
* 動態組件 - keep-alive
### beforeDestroy
* 類型：`Function`
* 詳細：
實例銷毀之前調用。在這一步，實例仍然完全可用。
該鉤子在服務器端渲染期間不被調用。
* 參考：生命周期圖示
### destroyed
* 類型：`Function`
* 詳細：
Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
該鉤子在服務器端渲染期間不被調用。
* 參考：生命周期圖示
### errorCaptured
> 2.5.0+ 新增
* 類型：`(err: Error, vm: Component, info: string) => ?boolean`
* 詳細：
當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回?`false`以阻止該錯誤繼續向上傳播。
你可以在此鉤子中修改組件的狀態。因此在模板或渲染函數中設置其它內容的短路條件非常重要，它可以防止當一個錯誤被捕獲時該組件進入一個無限的渲染循環。
錯誤傳播規則
* 默認情況下，如果全局的?`config.errorHandler`?被定義，所有的錯誤仍會發送它，因此這些錯誤仍然會向單一的分析服務的地方進行匯報。
* 如果一個組件的繼承或父級從屬鏈路中存在多個?`errorCaptured`?鉤子，則它們將會被相同的錯誤逐個喚起。
* 如果此?`errorCaptured`?鉤子自身拋出了一個錯誤，則這個新錯誤和原本被捕獲的錯誤都會發送給全局的?`config.errorHandler`。
* 一個?`errorCaptured`?鉤子能夠返回?`false`?以阻止錯誤繼續向上傳播。本質上是說“這個錯誤已經被搞定了且應該被忽略”。它會阻止其它任何會被這個錯誤喚起的?`errorCaptured`?鉤子和全局的?`config.errorHandler`。
## 選項 / 資源
### directives
* 類型：`Object`
* 詳細：
包含 Vue 實例可用指令的哈希表。
* 參考：自定義指令
### filters
* 類型：`Object`
* 詳細：
包含 Vue 實例可用過濾器的哈希表。
* 參考：`Vue.filter`
### components
* 類型：`Object`
* 詳細：
包含 Vue 實例可用組件的哈希表。
* 參考：組件
## 選項 / 組合
### parent
* 類型：`Vue instance`
* 詳細：
指定已創建的實例之父實例，在兩者之間建立父子關系。子實例可以用?`this.$parent`?訪問父實例，子實例被推入父實例的?`$children`?數組中。
節制地使用?`$parent`?和?`$children`?- 它們的主要目的是作為訪問組件的應急方法。更推薦用 props 和 events 實現父子組件通信
### mixins
* 類型：`Array<Object>`
* 詳細：
`mixins`?選項接受一個混入對象的數組。這些混入實例對象可以像正常的實例對象一樣包含選項，他們將在?`Vue.extend()`?里最終選擇使用相同的選項合并邏輯合并。舉例：如果你的混入包含一個鉤子而創建組件本身也有一個，兩個函數將被調用。
Mixin 鉤子按照傳入順序依次調用，并在調用組件自身的鉤子之前被調用。
* 示例：
```
var mixin = {
created: function () { console.log(1) }
}
var vm = new Vue({
created: function () { console.log(2) },
mixins: mixin
})
// => 1
// => 2
```
* 參考：混入
### extends
* 類型：`Object | Function`
* 詳細：
允許聲明擴展另一個組件(可以是一個簡單的選項對象或構造函數)，而無需使用?`Vue.extend`。這主要是為了便于擴展單文件組件。
這和?`mixins`?類似。
* 示例：
```
var CompA = { ... }
// 在沒有調用 `Vue.extend` 時候繼承 CompA
var CompB = {
extends: CompA,
...
}
```
### provide / inject
> 2.2.0 新增
* 類型：
* provide：`Object | () => Object`
* inject：`Array<string> | { key: string: string | Symbol | Object }`
* 詳細：
`provide`?和?`inject`?主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。
這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。
`provide`?選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。在該對象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持?`Symbol`?和?`Reflect.ownKeys`?的環境下可工作。
`inject`?選項應該是：
* 一個字符串數組，或
* 一個對象，對象的 key 是本地的綁定名，value 是：
* 在可用的注入內容中搜索用的 key (字符串或 Symbol)，或
* 一個對象，該對象的：
* `from`?屬性是在可用的注入內容中搜索用的 key (字符串或 Symbol)
* `default`?屬性是降級情況下使用的 value
> 提示：`provide`?和?`inject`?綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應的。
* 示例：
```
// 父級組件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子組件注入 'foo'
var Child = {
inject: 'foo',
created () {
console.log(this.foo) // => "bar"
}
// ...
}
```
利用 ES2015 Symbols、函數?`provide`?和對象?`inject`：
```
const s = Symbol()
const Provider = {
provide () {
return {
s: 'foo'
}
}
}
const Child = {
inject: { s },
// ...
}
```
> 接下來 2 個例子只工作在 Vue 2.2.1 或更高版本。低于這個版本時，注入的值會在?`props`?和?`data`?初始化之后得到。
使用一個注入的值作為一個屬性的默認值：
```
const Child = {
inject: 'foo',
props: {
bar: {
default () {
return this.foo
}
}
}
}
```
使用一個注入的值作為數據入口：
```
const Child = {
inject: 'foo',
data () {
return {
bar: this.foo
}
}
}
```
> 在 2.5.0+ 的注入可以通過設置默認值使其變成可選項：
```
const Child = {
inject: {
foo: { default: 'foo' }
}
}
```
如果它需要從一個不同名字的屬性注入，則使用?`from`?來表示其源屬性：
```
const Child = {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
```
與 prop 的默認值類似，你需要對非原始值使用一個工廠方法：
```
const Child = {
inject: {
foo: {
from: 'bar',
default: () => 1, 2, 3
}
}
}
```
## 選項 / 其它
### name
* 類型：`string`
* 限制：只有作為組件選項時起作用。
* 詳細：
允許組件模板遞歸地調用自身。注意，組件在全局用?`Vue.component()`?注冊時，全局 ID 自動作為組件的 name。
指定?`name`?選項的另一個好處是便于調試。有名字的組件有更友好的警告信息。另外，當在有?vue-devtools
### delimiters
* 類型：`Array<string>`
* 默認值：`"{{", "}}"`
* 限制：這個選項只在完整構建版本中的瀏覽器內編譯時可用。
* 詳細：
改變純文本插入分隔符。
* 示例：
```
new Vue({
delimiters: '${', '}'
})
// 分隔符變成了 ES6 模板字符串的風格
```
### functional
* 類型：`boolean`
* 詳細：
使組件無狀態 (沒有?`data`?) 和無實例 (沒有?`this`?上下文)。他們用一個簡單的?`render`?函數返回虛擬節點使他們更容易渲染。
* 參考：函數式組件
### model
> 2.2.0 新增
* 類型：`{ prop?: string, event?: string }`
* 詳細：
允許一個自定義組件在使用?`v-model`?時定制 prop 和 event。默認情況下，一個組件上的?`v-model`?會把?`value`?用作 prop 且把?`input`?用作 event，但是一些輸入類型比如單選框和復選框按鈕可能想使用?`value`?prop 來達到不同的目的。使用?`model`?選項可以回避這些情況產生的沖突。
* Example：
```
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
```
```
my-checkbox v-model="foo" value="some value">my-checkbox>
```
上述代碼相當于：
```
my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
my-checkbox>
```
### inheritAttrs
> 2.4.0 新增
* 類型：`boolean`
* 默認值：`true`
* 詳細：
默認情況下父作用域的不被認作 props 的特性綁定 (attribute bindings) 將會“回退”且作為普通的 HTML 特性應用在子組件的根元素上。當撰寫包裹一個目標元素或另一個組件的組件時，這可能不會總是符合預期行為。通過設置?`inheritAttrs`到?`false`，這些默認行為將會被去掉。而通過 (同樣是 2.4 新增的) 實例屬性?`$attrs`?可以讓這些特性生效，且可以通過?`v-bind`?顯性的綁定到非根元素上。
注意：這個選項不影響?`class`?和?`style`?綁定。
### comments
> 2.4.0 新增
* 類型：`boolean`
* 默認值：`false`
* 限制：這個選項只在完整構建版本中的瀏覽器內編譯時可用。
* 詳細：
當設為?`true`?時，將會保留且渲染模板中的 HTML 注釋。默認行為是舍棄它們。
## 實例屬性
### vm.$data
* 類型：`Object`
* 詳細：
Vue 實例觀察的數據對象。Vue 實例代理了對其 data 對象屬性的訪問。
* 參考：選項 / 數據 - data
### vm.$props
> 2.2.0 新增
* 類型：`Object`
* 詳細：
當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。
### vm.$el
* 類型：`HTMLElement`
* 只讀
* 詳細：
Vue 實例使用的根 DOM 元素。
### vm.$options
* 類型：`Object`
* 只讀
* 詳細：
用于當前 Vue 實例的初始化選項。需要在選項中包含自定義屬性時會有用處：
```
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // => 'foo'
}
})
```
### vm.$parent
* 類型：`Vue instance`
* 只讀
* 詳細：
父實例，如果當前實例有的話。
### vm.$root
* 類型：`Vue instance`
* 只讀
* 詳細：
當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。
### vm.$children
* 類型：`Array<Vue instance>`
* 只讀
* 詳細：
當前實例的直接子組件。需要注意?`$children`?并不保證順序，也不是響應式的。如果你發現自己正在嘗試使用?`$children`?來進行數據綁定，考慮使用一個數組配合?`v-for`?來生成子組件，并且使用 Array 作為真正的來源。
### vm.$slots
* 類型：`{ name: string: ?Array<VNode> }`
* 只讀
* 詳細：
用來訪問被插槽分發
在使用渲染函數
* 示例：
```
blog-post>
h1 slot="header">
About Me
h1>
p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.p>
p slot="footer">
Copyright 2016 Evan You
p>
p>If I have some content down here, it will also be included in vm.$slots.default.p>.
blog-post>
```
```
Vue.component('blog-post', {
render: function (createElement) {
var header = this.$slots.header
var body = this.$slots.default
var footer = this.$slots.footer
return createElement('div',
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
)
}
})
```
* 參考：
* `<slot>`?組件
* 使用插槽分發內容
* 渲染函數 - 插槽
### vm.$scopedSlots
> 2.1.0 新增
* 類型：`{ name: string: props => VNode | Array<VNode> }`
* 只讀
* 詳細：
用來訪問作用域插槽
`vm.$scopedSlots`?在使用渲染函數
* 參考：
* `<slot>`?組件
* 作用域插槽
* 渲染函數 - 插槽
### vm.$refs
* 類型：`Object`
* 只讀
* 詳細：
一個對象，持有注冊過?`ref`?特性
* 參考：
* 子組件引用
* 特殊特性 - ref
### vm.$isServer
* 類型：`boolean`
* 只讀
* 詳細：
當前 Vue 實例是否運行于服務器。
* 參考：服務端渲染
### vm.$attrs
* 類型：`{ key: string: string }`
* 只讀
* 詳細：
包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (`class`?和?`style`?除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (`class`和?`style`?除外)，并且可以通過?`v-bind="$attrs"`?傳入內部組件——在創建高級別的組件時非常有用。
### vm.$listeners
* 類型：`{ key: string: Function | Array<Function> }`
* 只讀
* 詳細：
包含了父作用域中的 (不含?`.native`?修飾器的)?`v-on`?事件監聽器。它可以通過?`v-on="$listeners"`?傳入內部組件——在創建更高層次的組件時非常有用。
## 實例方法 / 數據
### vm.$watch( expOrFn, callback, options )
* 參數：
* `{string | Function} expOrFn`
* `{Function | Object} callback`
* `{Object} options`
* `{boolean} deep`
* `{boolean} immediate`
* 返回值：`{Function} unwatch`
* 用法：
觀察 Vue 實例變化的一個表達式或計算屬性函數。回調函數得到的參數為新值和舊值。表達式只接受監督的鍵路徑。對于更復雜的表達式，用一個函數取代。
注意：在變異 (不是替換) 對象或數組時，舊值將與新值相同，因為它們的引用指向同一個對象/數組。Vue 不會保留變異之前值的副本。
* 示例：
```
// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做點什么
})
// 函數
vm.$watch(
function () {
return this.a + this.b
},
function (newVal, oldVal) {
// 做點什么
}
)
```
`vm.$watch`?返回一個取消觀察函數，用來停止觸發回調：
```
var unwatch = vm.$watch('a', cb)
// 之后取消觀察
unwatch()
```
* 選項：deep
為了發現對象內部值的變化，可以在選項參數中指定?`deep: true`?。注意監聽數組的變動不需要這么做。
```
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
```
* 選項：immediate
在選項參數中指定?`immediate: true`?將立即以表達式的當前值觸發回調：
```
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的當前值觸發回調
```
### vm.$set( target, key, value )
* 參數：
* `{Object | Array} target`
* `{string | number} key`
* `{any} value`
* 返回值：設置的值。
* 用法：
這是全局?`Vue.set`?的別名。
* 參考：Vue.set
### vm.$delete( target, key )
* 參數：
* `{Object | Array} target`
* `{string | number} key`
* 用法：
這是全局?`Vue.delete`?的別名。
* 參考：Vue.delete
## 實例方法 / 事件
### vm.$on( event, callback )
* 參數：
* `{string | Array<string>} event`?(數組只在 2.2.0+ 中支持)
* `{Function} callback`
* 用法：
監聽當前實例上的自定義事件。事件可以由`vm.$emit`觸發。回調函數會接收所有傳入事件觸發函數的額外參數。
* 示例：
```
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"
```
### vm.$once( event, callback )
* 參數：
* `{string} event`
* `{Function} callback`
* 用法：
監聽一個自定義事件，但是只觸發一次，在第一次觸發之后移除監聽器。
### vm.$off( event, callback )
* 參數：
* `{string | Array<string>} event`?(只在 2.2.2+ 支持數組)
* `{Function} callback`
* 用法：
移除自定義事件監聽器。
* 如果沒有提供參數，則移除所有的事件監聽器；
* 如果只提供了事件，則移除該事件所有的監聽器；
* 如果同時提供了事件與回調，則只移除這個回調的監聽器。
### vm.$emit( eventName, …args )
* 參數：
* `{string} eventName`
* `...args`
觸發當前實例上的事件。附加參數都會傳給監聽器回調。
* 示例：
只配合一個事件名使用?`$emit`：
```
Vue.component('welcome-button', {
template: `
Click me to be welcomed
`
})
```
```
div id="emit-example-simple">
welcome-button v-on:welcome="sayHi">welcome-button>
div>
```
```
new Vue({
el: '#emit-example-simple',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})
```
Click me to be welcomed
配合額外的參數使用?`$emit`：
```
Vue.component('magic-eight-ball', {
data: function () {
return {
possibleAdvice: 'Yes', 'No', 'Maybe'
}
},
methods: {
giveAdvice: function () {
var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
this.$emit('give-advice', this.possibleAdvicerandomAdviceIndex)
}
},
template: `
Click me for advice
`
})
```
```
div id="emit-example-argument">
magic-eight-ball v-on:give-advice="showAdvice">magic-eight-ball>
div>
```
```
new Vue({
el: '#emit-example-argument',
methods: {
showAdvice: function (advice) {
alert(advice)
}
}
})
```
Click me for advice
## 實例方法 / 生命周期
### vm.$mount( elementOrSelector )
* 參數：
* `{Element | string} elementOrSelector`
* `{boolean} hydrating`
* 返回值：`vm`?- 實例自身
* 用法：
如果 Vue 實例在實例化時沒有收到 el 選項，則它處于“未掛載”狀態，沒有關聯的 DOM 元素。可以使用?`vm.$mount()`?手動地掛載一個未掛載的實例。
如果沒有提供?`elementOrSelector`?參數，模板將被渲染為文檔之外的的元素，并且你必須使用原生 DOM API 把它插入文檔中。
這個方法返回實例自身，因而可以鏈式調用其它實例方法。
* 示例：
```
var MyComponent = Vue.extend({
template: 'Hello!'
})
// 創建并掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文檔之外渲染并且隨后掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
```
* 參考：
* 生命周期圖示
* 服務端渲染
### vm.$forceUpdate()
* 示例：
迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。
### vm.$nextTick( callback )
* 參數：
* `{Function} callback`
* 用法：
將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法?`Vue.nextTick`?一樣，不同的是回調的?`this`?自動綁定到調用它的實例上。
> 2.1.0 起新增：如果沒有提供回調且在支持 Promise 的環境中，則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill，所以如果你的目標瀏覽器不是原生支持 Promise (IE：你們都看我干嘛)，你得自行 polyfill。
* 示例：
```
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改數據
this.message = 'changed'
// DOM 還沒有更新
this.$nextTick(function () {
// DOM 現在更新了
// `this` 綁定到當前實例
this.doSomethingElse()
})
}
}
})
```
* 參考：Vue.nextTick
### vm.$destroy()
* 用法：
完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監聽器。
觸發?`beforeDestroy`?和?`destroyed`?的鉤子。
在大多數場景中你不應該調用這個方法。最好使用?`v-if`?和?`v-for`?指令以數據驅動的方式控制子組件的生命周期。
* 參考：生命周期圖示
## 指令
### v-text
* 預期：`string`
* 詳細：
更新元素的?`textContent`。如果要更新部分的?`textContent`?，需要使用?`{{ Mustache }}`?插值。
* 示例：
```
span v-text="msg">span>
span>{{msg}}span>
```
* 參考：數據綁定語法 - 插值
### v-html
* 預期：`string`
* 詳細：
更新元素的?`innerHTML`?。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯?。如果試圖使用?`v-html`?組合模板，可以重新考慮是否通過使用組件來替代。
在網站上動態渲染任意 HTML 是非常危險的，因為容易導致?XSS 攻擊
在單文件組件
* 示例：
```
div v-html="html">div>
```
* 參考：數據綁定語法 - 插值
### v-show
* 預期：`any`
* 用法：
根據表達式之真假值，切換元素的?`display`?CSS 屬性。
當條件變化時該指令觸發過渡效果。
* 參考：條件渲染 - v-show
### v-if
* 預期：`any`
* 用法：
根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀并重建。如果元素是?`<template>`?，將提出它的內容作為條件塊。
當條件變化時該指令觸發過渡效果。
當和?`v-if`?一起使用時，`v-for`?的優先級比?`v-if`?更高。詳見列表渲染教程
* 參考：條件渲染 - v-if
### v-else
* 不需要表達式
* 限制：前一兄弟元素必須有?`v-if`?或?`v-else-if`。
* 用法：
為?`v-if`?或者?`v-else-if`?添加“else 塊”。
```
div v-if="Math.random() > 0.5">
Now you see me
div>
div v-else>
Now you don't
div>
```
* 參考：條件渲染 - v-else
### v-else-if
> 2.1.0 新增
* 類型：`any`
* 限制：前一兄弟元素必須有?`v-if`?或?`v-else-if`。
* 用法：
表示?`v-if`?的 “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-else-if
### v-for
* 預期：`Array | Object | number | string`
* 用法：
基于源數據多次渲染元素或模板塊。此指令之值，必須使用特定語法?`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`?的特殊屬性：
```
div v-for="item in items" :key="item.id">
{{ item.text }}
div>
```
`v-for`?的詳細用法可以通過以下鏈接查看教程詳細說明。
* 參考：
* 列表渲染
* key
### v-on
* 縮寫：`@`
* 預期：`Function | Inline Statement | Object`
* 參數：`event`
* 修飾符：
* `.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 }`?模式添加偵聽器
* 用法：
綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監聽原生 DOM 事件
在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個?`$event`?屬性：`v-on:click="handle('ok', $event)"`。
從?`2.4.0`?開始，`v-on`?同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。
* 示例：
```
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>
button v-on="{ mousedown: doThis, mouseup: doThat }">button>
```
在子組件上監聽自定義事件 (當子組件觸發“my-event”時將調用事件處理器)：
```
my-component @my-event="handleThis">my-component>
my-component @my-event="handleThis(123, $event)">my-component>
my-component @click.native="onClick">my-component>
```
* 參考：
* 事件處理器
* 組件 - 自定義事件
### v-bind
* 縮寫：`:`
* 預期：`any (with argument) | Object (without argument)`
* 參數：`attrOrProp (optional)`
* 修飾符：
* `.prop`?- 被用于綁定 DOM 屬性 (property)。(差別在哪里？
* `.camel`?- (2.1.0+) 將 kebab-case 特性名轉換為 camelCase. (從 2.1.0 開始支持)
* `.sync`?(2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的?`v-on`?偵聽器。
* 用法：
動態地綁定一個或多個特性，或一個組件 prop 到表達式。
在綁定?`class`?或?`style`?特性時，支持其它類型的值，如數組或對象。可以通過下面的教程鏈接查看詳情。
在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時?`class`?和?`style`?綁定不支持數組和對象。
* 示例：
```
img v-bind:src="imageSrc">
img :src="imageSrc">
img :src="'/path/to/images/' + fileName">
div :class="{ red: isRed }">div>
div :class="classA, classB">div>
div :class="classA, { classB: isB, classC: isC }">
div :style="{ fontSize: size + 'px' }">div>
div :style="styleObjectA, styleObjectB">div>
div v-bind="{ id: someProp, 'other-attr': otherProp }">div>
div v-bind:text-content.prop="text">div>
my-component :prop="someThing">my-component>
child-component v-bind="$props">child-component>
svg>a :xlink:special="foo">a>svg>
```
`.camel`?修飾符允許在使用 DOM 模板時將?`v-bind`?屬性名稱駝峰化，例如 SVG 的?`viewBox`?屬性：
```
svg :view-box.camel="viewBox">svg>
```
在使用字符串模板或通過?`vue-loader`/`vueify`?編譯時，無需使用?`.camel`。
* 參考：
* Class 與 Style 綁定
* 組件 - Props
* 組件 -?`.sync`?修飾符
### v-model
* 預期：隨表單控件類型不同而不同。
* 限制：
* `<input>`
* `<select>`
* `<textarea>`
* components
* 修飾符：
* `.lazy`
* `.number`
* `.trim`
* 用法：
在表單控件或者組件上創建雙向綁定。細節請看下面的教程鏈接。
* 參考：
* 表單控件綁定
* 組件 - 在輸入組件上使用自定義事件
### v-pre
* 不需要表達式
* 用法：
跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯。
* 示例：
```
span v-pre>{{ this will not be compiled }}span>
```
### v-cloak
* 不需要表達式
* 用法：
這個指令保持在元素上直到關聯實例結束編譯。和 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>commenth1>
p>{{msg}}p>
div>
my-component v-once :comment="msg">my-component>
ul>
li v-for="i in list" v-once>{{i}}li>
ul>
```
* 參考：
* 數據綁定語法- 插值
* 組件 - 對低開銷的靜態組件使用?`v-once`
## 特殊特性
### key
* 預期：`number | string`
`key`?的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素并且盡可能的嘗試修復/再利用相同類型元素的算法。使用 key，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。
有相同父元素的子元素必須有獨特的 key。重復的 key 會造成渲染錯誤。
最常見的用例是結合?`v-for`：
```
ul>
li v-for="item in items" :key="item.id">...li>
ul>
```
它也可以用于強制替換元素/組件而不是重復使用它。當你遇到如下場景時它可能會很有用：
* 完整地觸發組件的生命周期鉤子
* 觸發過渡
例如：
```
transition>
span :key="text">{{ text }}span>
transition>
```
當?`text`?發生改變時，`<span>`?會隨時被更新，因此會觸發過渡。
### ref
* 預期：`string`
`ref`?被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的?`$refs`對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例：
```
p ref="p">hellop>
child-component ref="child">child-component>
```
當?`v-for`?用于元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組。
關于 ref 注冊時間的重要說明：因為 ref 本身是作為渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！`$refs`?也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。
* 參考：子組件 Refs
### slot
* 預期：`string`
用于標記往哪個具名插槽中插入子組件內容。
詳細用法，請參考下面指南部分的鏈接。
* 參考：具名插槽
### slot-scope
> 2.5.0 新增
* 預期：`function argument expression`
* 用法：
用于將元素或組件表示為作用域插槽。特性的值應該是可以出現在函數簽名的參數位置的合法的 JavaScript 表達式。這意味著在支持的環境中，你還可以在表達式中使用 ES2015 解構。它在 2.5.0+ 中替代了?`scope`
此屬性不支持動態綁定。
* 參考：Scoped Slots
### scope?replaced
用于表示一個作為帶作用域的插槽的?`<template>`?元素，它在 2.5.0+ 中被?`slot-scope`
* 用法：
除了?`scope`?只可以用于?`<template>`?元素，其它和?`slot-scope`
### is
* 預期：`string | Object (組件的選項對象)`
用于動態組件
示例：
```
component v-bind:is="currentView">component>
` 放在一個 -->
` 內可能無效且被放置到外面 -->
table>
tr is="my-row">tr>
table>
```
更多的使用細節，請移步至下面的鏈接。
* See also：
* 動態組件
* DOM 模板解析說明
## 內置的組件
### component
* Props：
* `is`?- string | ComponentDefinition | ComponentConstructor
* `inline-template`?- boolean
* 用法：
渲染一個“元組件”為動態組件。依?`is`?的值，來決定哪個組件被渲染。
```
component :is="componentId">component>
component :is="$options.components.child">component>
```
* 參考：動態組件
### transition
* Props：
* `name`?- string，用于自動生成 CSS 過渡類名。例如：`name: 'fade'`?將自動拓展為`.fade-enter`，`.fade-enter-active`等。默認類名為?`"v"`
* `appear`?- boolean，是否在初始渲染時使用過渡。默認為?`false`。
* `css`?- boolean，是否使用 CSS 過渡類。默認為?`true`。如果設置為?`false`，將只通過組件事件觸發注冊的 JavaScript 鉤子。
* `type`?- string，指定過渡事件類型，偵聽過渡何時結束。有效值為?`"transition"`?和?`"animation"`。默認 Vue.js 將自動檢測出持續時間長的為過渡事件類型。
* `mode`?- string，控制離開/進入的過渡時間序列。有效的模式有?`"out-in"`?和?`"in-out"`；默認同時生效。
* `enter-class`?- string
* `leave-class`?- string
* `appear-class`?- string
* `enter-to-class`?- string
* `leave-to-class`?- string
* `appear-to-class`?- string
* `enter-active-class`?- string
* `leave-active-class`?- string
* `appear-active-class`?- string
* 事件：
* `before-enter`
* `before-leave`
* `before-appear`
* `enter`
* `leave`
* `appear`
* `after-enter`
* `after-leave`
* `after-appear`
* `enter-cancelled`
* `leave-cancelled`?(`v-show`?only)
* `appear-cancelled`
* 用法：
`<transition>`?元素作為單個元素/組件的過渡效果。`<transition>`?只會把過渡效果應用到其包裹的內容上，而不會額外渲染 DOM 元素，也不會出現在檢測過的組件層級中。
```
transition>
div v-if="ok">toggled contentdiv>
transition>
transition name="fade" mode="out-in" appear>
component :is="view">component>
transition>
div id="transition-demo">
transition @after-enter="transitionComplete">
div v-show="ok">toggled contentdiv>
transition>
div>
```
```
new Vue({
...
methods: {
transitionComplete: function (el) {
// 傳入 'el' 這個 DOM 元素作為參數。
}
}
...
}).$mount('#transition-demo')
```
* 參考：過渡：進入，離開和列表
### transition-group
* Props：
* `tag`?- string，默認為?`span`
* `move-class`?- 覆蓋移動過渡期間應用的 CSS 類。
* 除了?`mode`，其他特性和?`<transition>`?相同。
* 事件：
* 事件和?`<transition>`?相同。
* 用法：
`<transition-group>`?元素作為多個元素/組件的過渡效果。`<transition-group>`渲染一個真實的 DOM 元素。默認渲染?`<span>`，可以通過?`tag`?屬性配置哪個元素應該被渲染。
注意，每個?`<transition-group>`?的子節點必須有?獨立的 key?，動畫才能正常工作
`<transition-group>`?支持通過 CSS transform 過渡移動。當一個子節點被更新，從屏幕上的位置發生變化，它將會獲取應用 CSS 移動類 (通過?`name`?屬性或配置?`move-class`?屬性自動生成)。如果 CSS?`transform`?屬性是“可過渡”屬性，當應用移動類時，將會使用?FLIP 技術
```
transition-group tag="ul" name="slide">
li v-for="item in items" :key="item.id">
{{ item.text }}
li>
transition-group>
```
* 參考：過渡：進入，離開和列表
### keep-alive
* Props：
* `include`?- 字符串或正則表達式。只有名稱匹配的組件會被緩存。
* `exclude`?- 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
* `max`?- 數字。最多可以緩存多少組件實例。
* 用法：
`<keep-alive>`?包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和?`<transition>`?相似，`<keep-alive>`?是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。
當組件在?`<keep-alive>`?內被切換，它的?`activated`?和?`deactivated`?這兩個生命周期鉤子函數將會被對應執行。
> 在 2.2.0 及其更高版本中，`activated`?和?`deactivated`?將會在?`<keep-alive>`樹內的所有嵌套組件中觸發。
主要用于保留組件狀態或避免重新渲染。
```
keep-alive>
component :is="view">component>
keep-alive>
keep-alive>
comp-a v-if="a > 1">comp-a>
comp-b v-else>comp-b>
keep-alive>
` 一起使用 -->
transition>
keep-alive>
component :is="view">component>
keep-alive>
transition>
```
注意，`<keep-alive>`?是用在其一個直屬的子組件被開關的情形。如果你在其中有?`v-for`?則不會工作。如果有上述的多個條件性的子元素，`<keep-alive>`?要求同時只有一個子元素被渲染。
* `include`?and?`exclude`
> 2.1.0 新增
`include`?和?`exclude`?屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數組來表示：
```
keep-alive include="a,b">
component :is="view">component>
keep-alive>
keep-alive :include="/a|b/">
component :is="view">component>
keep-alive>
keep-alive :include="'a', 'b'">
component :is="view">component>
keep-alive>
```
匹配首先檢查組件自身的?`name`?選項，如果?`name`?選項不可用，則匹配它的局部注冊名稱 (父組件?`components`?選項的鍵值)。匿名組件不能被匹配。
* `max`
> 2.5.0 新增
最多可以緩存多少組件實例。一旦這個數字達到了，在新實例被創建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉。
```
keep-alive :max="10">
component :is="view">component>
keep-alive>
```
`<keep-alive>`?不會在函數式組件中正常工作，因為它們沒有緩存實例。
* 參考：動態組件 - keep-alive
### slot
* Props：
* `name`?- string，用于命名插槽。
* Usage：
`<slot>`?元素作為組件模板之中的內容分發插槽。`<slot>`?元素自身將被替換。
詳細用法，請參考下面教程的鏈接。
* 參考：使用插槽分發內容
## VNode 接口
* 請參考?VNode class declaration
## 服務端渲染
* 請參考?vue-server-renderer package documentation
發現錯誤？想參與編輯？?在 GitHub 上編輯此頁！
