类型：Object | Function
详细：
允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。
这和 mixins 类似。
示例：
var CompA = { ... }
// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
extends: CompA,
...
}<button>Click to copy</button>2.2.0 新增
类型：
Object | () => ObjectArray<string> | { [key: string]: string | Symbol | Object }详细：
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是：
from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)default 属性是降级情况下使用的 value提示：
provide和inject绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
示例：
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}<button>Click to copy</button>利用 ES2015 Symbols、函数 provide 和对象 inject：
``` js const s = Symbol()
const Provider = { provide () {
return {<button>Click to copy</button> [s]: 'foo'
}
}<button>Click to copy</button>}
const Child = { inject: { s }, // ... }
> 接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 `props` 和 `data` 初始化之后得到。
使用一个注入的值作为一个属性的默认值：
```js
const Child = {
inject: ['foo'],
props: {
bar: {
default () {
return this.foo
}
}
}
}<button>Click to copy</button>使用一个注入的值作为数据入口：
const Child = {
inject: ['foo'],
data () {
return {
bar: this.foo
}
}
}<button>Click to copy</button>在 2.5.0+ 的注入可以通过设置默认值使其变成可选项：
const Child = {
inject: {
foo: { default: 'foo' }
}
}<button>Click to copy</button>如果它需要从一个不同名字的属性注入，则使用 from 来表示其源属性：
const Child = {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}<button>Click to copy</button>与 prop 的默认值类似，你需要对非原始值使用一个工厂方法：
const Child = {
inject: {
foo: {
from: 'bar',
default: () => [1, 2, 3]
}
}
}<button>Click to copy</button>类型：string
限制：只有作为组件选项时起作用。
详细：
允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。
类型：Array<string>
默认值：{% raw %}["{{", "}}"]{% endraw %}
限制：这个选项只在完整构建版本中的浏览器内编译时可用。
详细：
改变纯文本插入分隔符。
示例：
new Vue({
delimiters: ['${', '}']
})
// 分隔符变成了 ES6 模板字符串的风格<button>Click to copy</button>类型：boolean
详细：
使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。
参考：函数式组件
2.2.0 新增
类型：{ prop?: string, event?: string }
详细：
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 valueprop 来达到不同的目的。使用 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
}
},
// ...
})<button>Click to copy</button><my-checkbox v-model="foo" value="some value"></my-checkbox><button>Click to copy</button>上述代码相当于：
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox><button>Click to copy</button>2.4.0 新增
类型：boolean
默认值：true
详细：
默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。
注意：这个选项不影响 class 和 style 绑定。
2.4.0 新增
类型：boolean
默认值：false
限制：这个选项只在完整构建版本中的浏览器内编译时可用。
详细：
当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。
类型：Object
详细：
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
2.2.0 新增
类型：Object
详细：
当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
类型：HTMLElement
只读
详细：
Vue 实例使用的根 DOM 元素。
类型：Object
只读
详细：
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处：
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // => 'foo'
}
})<button>Click to copy</button>类型：Vue instance
只读
详细：
父实例，如果当前实例有的话。
类型：Vue instance
只读
详细：
当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
类型：Array<Vue instance>
只读
详细：
当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
类型：{ [name: string]: ?Array<VNode> }
只读
详细：
用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如：slot="foo" 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。
在使用渲染函数书写一个组件时，访问 vm.$slots 最有帮助。
示例：
<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><button>Click to copy</button>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)
])
}
})<button>Click to copy</button>参考：
2.1.0 新增
类型：{ [name: string]: props => VNode | Array<VNode> }
只读
详细：
用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。
参考：
类型：Object
只读
详细：
一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。
参考：
类型：boolean
只读
详细：
当前 Vue 实例是否运行于服务器。
参考：服务端渲染
类型：{ [key: string]: string }
只读
详细：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
类型：{ [key: string]: Function | Array<Function> }
只读
详细：
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
参数：
{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) {
// 做点什么
}
)<button>Click to copy</button>vm.$watch 返回一个取消观察函数，用来停止触发回调：
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()<button>Click to copy</button>选项：deep
为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired<button>Click to copy</button>选项：immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的当前值触发回调<button>Click to copy</button>参数：
{Object | Array} target{string | number} key{any} value返回值：设置的值。
用法：
这是全局 Vue.set 的别名。
参考：Vue.set
参数：
{Object | Array} target{string | number} key用法：
这是全局 Vue.delete 的别名。
参考：Vue.delete
参数：
{string | Array<string>} event (数组只在 2.2.0+ 中支持){Function} callback用法：
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
示例：
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"<button>Click to copy</button>参数：
{string} event{Function} callback用法：
监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。
参数：
{string | Array<string>} event (只在 2.2.2+ 支持数组){Function} [callback]用法：
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
参数：
{string} eventName[...args]触发当前实例上的事件。附加参数都会传给监听器回调。
示例：
只配合一个事件名使用 $emit：
Vue.component('welcome-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>
`
})<button>Click to copy</button><div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button>
</div><button>Click to copy</button>new Vue({
el: '#emit-example-simple',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})<button>Click to copy</button>{% raw %}
配合额外的参数使用 $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.possibleAdvice[randomAdviceIndex])
}
},
template: `
<button v-on:click="giveAdvice">
Click me for advice
</button>
`
})<button>Click to copy</button><div id="emit-example-argument">
<magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div><button>Click to copy</button>new Vue({
el: '#emit-example-argument',
methods: {
showAdvice: function (advice) {
alert(advice)
}
}
})<button>Click to copy</button>{% raw %}
参数：
{Element | string} [elementOrSelector]{boolean} [hydrating]返回值：vm - 实例自身
用法：
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。
示例：
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)<button>Click to copy</button>参考：
示例：
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
参数：
{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()
})
}
}
})<button>Click to copy</button>参考：Vue.nextTick
用法：
完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子。
在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。
参考：生命周期图示
预期：string
详细：
更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {% raw %}{{ Mustache }}{% endraw %} 插值。
示例：
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span><button>Click to copy</button>参考：数据绑定语法 - 插值
预期：string
详细：
更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html组合模板，可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略。
示例：
<div v-html="html"></div><button>Click to copy</button>参考：数据绑定语法 - 插值
预期：any
用法：
根据表达式之真假值，切换元素的 display CSS 属性。
当条件变化时该指令触发过渡效果。
预期：any
用法：
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程
参考：条件渲染 - v-if
不需要表达式
限制：前一兄弟元素必须有 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><button>Click to copy</button>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><button>Click to copy</button>预期：Array | Object | number | string
用法：
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
<div v-for="item in items">
{{ item.text }}
</div><button>Click to copy</button>另外也可以为数组索引指定别名 (或者用于对象的键)：
<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><button>Click to copy</button>v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div><button>Click to copy</button>v-for 的详细用法可以通过以下链接查看教程详细说明。
参考：
缩写：@
预期：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>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button><button>Click to copy</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><button>Click to copy</button>参考：
缩写：:
预期：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">
<!-- 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><button>Click to copy</button>.camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性：
<svg :view-box.camel="viewBox"></svg><button>Click to copy</button>在使用字符串模板或通过 vue-loader/vueify 编译时，无需使用 .camel。
参考：
