- 全局配置
- silent
- optionMergeStrategies
- devtools
- errorHandler
- warnHandler
- ignoredElements
- keyCodes
- performance
- productionTip
- 全局 API
- Vue.extend
- Vue.nextTick
- Vue.set
- Vue.delete
- Vue.directive
- Vue.filter
- Vue.component
- Vue.use
- Vue.mixin
- Vue.compile
- Vue.version
- 选项 / 数据
- 选项 / DOM
- 选项 / 生命周期钩子
- 选项 / 资源
- 选项 / 组合
- 选项 / 其它
- 实例属性
- vm.$data
- vm.$props
- vm.$el
- vm.$options
- vm.$parent
- vm.$root
- vm.$children
- vm.$slots
- vm.$scopedSlots
- vm.$refs
- vm.$isServer
- vm.$attrs
- vm.$listeners
- 实例方法 / 数据
- 实例方法 / 事件
- 实例方法 / 生命周期
- 指令
- 特殊特性
- 内置的组件
- VNode 接口
- 服务端渲染
全局配置
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 检查代码。开发版本默认为
true
,生产版本默认为false
。生产版本设为true
可以启用检查。
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>
默认值:
[]
用法:
Vue.config.ignoredElements = ['my-custom-web-component', 'another-web-component']须使 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
API 的浏览器上。
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: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',data: function () {return {firstName: 'Walter',lastName: 'White',alias: 'Heisenberg'}}})// 创建 Profile 实例,并挂载到一个元素上。new Profile().$mount('#mount-point')结果如下:
<p>Walter White aka Heisenberg</p>参考:组件
Vue.nextTick( [callback, context] )
参数:
{Function} [callback]
{Object} [context]
用法:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
// 修改数据vm.msg = 'Hello'// DOM 还没有更新Vue.nextTick(function () {// DOM 更新了})2.1.0 起新增:如果没有提供回调且支持 promise 的环境中返回 promise。
Vue.set( target, key, value )
参数:
{Object | Array} target
{string | number} key
{any} value
返回值:设置的值。
用法:
设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
注意对象不能是 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 的参数调用。当 install 方法被同一个插件多次调用,插件将只会被安装一次。
参考:插件
Vue.mixin( mixin )
参数:
{Object} mixin
用法:
全局注册一个混合,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混合,向组件注入自定义的行为。不推荐在应用代码中使用。
参考:全局混合
Vue.compile( template )
参数:
{string} template
用法:
在 render 函数中编译模板字符串。只在独立构建时有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')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 // => 1vm.$data === data // => true// Vue.extend() 中 data 必须是函数var Component = Vue.extend({data: function () {return { a: 1 }}})注意,不应该对
data
属性使用箭头函数 (例如data: () => { return { a: this.myProp }}
)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.myProp
将是 undefined。
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: '<div>{{ msg }}</div>'})var vm = new Comp({propsData: {msg: 'hello'}})参考:Props
computed
类型:
{ [key: string]: Function | { get: Function, set: Function } }
详细:
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意,不应该使用箭头函数来定义计算属性函数 (例如
aDouble: () => this.a * 2
)。理由是箭头函数绑定了父级作用域的上下文,所以this
将不会按照期望指向 Vue 实例,this.a
将是 undefined。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。
示例:
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 // => 2vm.aPlus = 3vm.a // => 2vm.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 }
详细:
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用
$watch()
,遍历 watch 对象的每一个属性。示例:
var vm = new Vue({data: {a: 1,b: 2,c: 3},watch: {a: function (val, oldVal) {console.log('new: %s, old: %s', val, oldVal)},// 方法名b: 'someMethod',// 深度 watcherc: {handler: function (val, oldVal) { /* ... */ },deep: true}}})vm.a = 2 // => new: 2, old: 1注意,不应该使用箭头函数来定义 watcher 函数 (例如
searchQuery: newValue => this.updateAutocomplete(newValue)
)。理由是箭头函数绑定了父级作用域的上下文,所以this
将不会按照期望指向 Vue 实例,this.updateAutocomplete
将是 undefined。
选项 / 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 库。参考:
template
类型:
string
详细:
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
如果值以
#
开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用<script type="x-template">
包含模板。出于安全考虑,您应该只使用您信任的 Vue 模板。避免使用其他人生成的内容作为您的模板。
如果 Vue 选项中包含
render
函数,template 选项将被忽略。参考:
render
类型:
(createElement: () => VNode) => VNode
详细:
字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。
render
函数接收一个createElement
方法作为第一个参数用来创建VNode
。如果组件是一个函数组件,渲染函数还会接收一个额外的
context
参数,为没有实例的函数组件提供上下文信息。Vue 选项中的
render
函数若存在,则 Vue 构造函数不会从template
选项或通过el
选项指定的挂载元素中提取出的 HTML 模板编译render
函数。参考:渲染函数
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
:mounted: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been rendered})}该钩子在服务器端渲染期间不被调用。
参考:生命周期图示
beforeUpdate
类型:
Function
详细:
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
该钩子在服务器端渲染期间不被调用。
参考:生命周期图示
updated
类型:
Function
详细:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
注意
updated
不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉updated
:updated: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been re-rendered})}该钩子在服务器端渲染期间不被调用。
参考:生命周期图示
activated
类型:
Function
详细:
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
参考:
deactivated
类型:
Function
详细:
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。
参考:
beforeDestroy
类型:
Function
详细:
实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
参考:生命周期图示
destroyed
类型:
Function
详细:
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
参考:生命周期图示
选项 / 资源
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` 时候继承 CompAvar CompB = {extends: CompA,...}
provide / inject
2.2.0 新增
类型:
- provide:
Object | () => Object
- inject:
Array<string> | { [key: string]: string | Symbol }
- provide:
详细:
provide
和inject
主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。
provide
选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持Symbol
和Reflect.ownKeys
的环境下可工作。inject
选项应该是一个字符串数组或一个对象,该对象的 key 代表了本地绑定的名称,value 为其 key (字符串或 Symbol) 以在可用的注入中搜索。提示:
provide
和inject
绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。示例:
var Provider = {provide: {foo: 'bar'},// ...}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}}}
选项 / 其它
name
类型:
string
限制:只有作为组件选项时起作用。
详细:
允许组件模板递归地调用自身。注意,组件在全局用
Vue.component()
注册时,全局 ID 自动作为组件的 name。指定
name
选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有 vue-devtools,未命名组件将显示成<AnonymousComponent>
,这很没有语义。通过提供name
选项,可以获得更有语义信息的组件树。
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 purposevalue: 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 对象属性的访问。
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> }
只读
详细:
用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:
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>Vue.component('blog-post', {render: function (createElement) {var header = this.$slots.headervar body = this.$slots.defaultvar footer = this.$slots.footerreturn createElement('div', [createElement('header', header),createElement('main', body),createElement('footer', footer)])}})参考:
vm.$scopedSlots
2.1.0 新增
类型:
{ [name: string]: props => VNode | Array<VNode> }
只读
详细:
用来访问作用域插槽。对于包括
默认 slot
在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。在使用
render
函数 书写一个组件时,访问vm.$scopedSlots
最有帮助。参考:
vm.$refs
类型:
Object
只读
详细:
一个对象,其中包含了所有拥有
ref
注册的子组件。参考:
vm.$isServer
类型:
boolean
只读
详细:
当前 Vue 实例是否运行于服务器。
参考:服务端渲染
vm.$attrs
类型:
{ [key: string]: string }
只读
详细:
包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (
class
和style
除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (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( event, […args] )
参数:
{string} event
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。
实例方法 / 生命周期
vm.$mount( [elementOrSelector] )
参数:
{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)参考:
vm.$forceUpdate()
示例:
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
vm.$nextTick( [callback] )
参数:
{Function} [callback]
用法:
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法
Vue.nextTick
一样,不同的是回调的this
自动绑定到调用它的实例上。2.1.0 新增:如果没有提供回调且支持 Promise 的环境中返回 Promise。
示例:
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 攻击。只在可信内容上使用
v-html
,永不用在用户提交的内容上。示例:
<div v-html="html"></div>参考:数据绑定语法 - 插值
v-show
预期:
any
用法:
根据表达式之真假值,切换元素的
display
CSS 属性。当条件变化时该指令触发过渡效果。
当和
v-if
一起使用时,v-for
的优先级比v-if
更高。详见列表渲染教程
v-if
预期:
any
用法:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是
<template>
,将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
参考:条件渲染 - 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-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-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
的详细用法可以通过以下链接查看教程详细说明。参考:
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 }
模式添加侦听器
用法:
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
从
2.4.0
开始,v-on
同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个
$event
属性:v-on:click="handle('ok', $event)"
。示例:
<!-- 方法处理器 --><button v-on:click="doThis"></button><!-- 对象语法 (2.4.0+) --><button v-on="{ mousedown: doThis, mouseup: doThat }"></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>在子组件上监听自定义事件 (当子组件触发“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"><!-- 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>.camel
修饰符允许在使用 DOM 模板时将v-bind
属性名称驼峰化,例如 SVG 的viewBox
属性:<svg :view-box.camel="viewBox"></svg>在使用字符串模板或通过
vue-loader
/vueify
编译时,无需使用.camel
。参考:
v-model
预期:随表单控件类型不同而不同。
限制:
<input>
<select>
<textarea>
- components
修饰符:
用法:
在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。
参考:
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>comment</h1><p>{{msg}}</p></div><!-- 组件 --><my-component v-once :comment="msg"></my-component><!-- `v-for` 指令--><ul><li v-for="i in list" v-once>{{i}}</li></ul>参考:
特殊特性
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 元素;如果用在子组件上,引用就指向组件实例:<!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$refs.child will be the child comp instance --><child-comp ref="child"></child-comp>当
v-for
用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!
$refs
也不是响应式的,因此你不应该试图用它在模板中做数据绑定。参考:子组件 Refs
slot
预期:
string
用于标记往哪个具名插槽中插入子组件内容。
详细用法,请参考下面指南部分的链接。
参考:具名插槽
is
预期:
string
用于动态组件且基于 DOM 内模板的限制来工作。
示例:
<!-- component changes when currentView changes --><component v-bind:is="currentView"></component><!-- necessary because `<my-row>` would be invalid inside --><!-- a `<table>` element and so would be hoisted out --><table><tr is="my-row"></tr></table>更多的使用细节,请移步至下面的链接。
See also:
内置的组件
component
Props:
is
- string | ComponentDefinition | ComponentConstructorinline-template
- boolean
用法:
渲染一个“元组件”为动态组件。依
is
的值,来决定哪个组件被渲染。<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --><component :is="componentId"></component><!-- 也能够渲染注册过的组件或 prop 传入的组件 --><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
- stringleave-class
- stringappear-class
- stringenter-to-class
- stringleave-to-class
- stringappear-to-class
- stringenter-active-class
- stringleave-active-class
- stringappear-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 content</div></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 content</div></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
属性自动生成)。如果 CSStransform
属性是“可过渡”属性,当应用移动类时,将会使用 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
- 字符串或正则表达式。任何匹配的组件都不会被缓存。
用法:
<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>` 一起使用 --><transition><keep-alive><component :is="view"></component></keep-alive></transition>注意,
<keep-alive>
是用在其一个直属的子组件被开关的情形。如果你在其中有v-if
则不会工作。如果有上述的多个条件性的子元素,<keep-alive>
要求同时只有一个子元素被渲染。include
andexclude
2.1.0 新增
include
和exclude
属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:<!-- 逗号分隔字符串 --><keep-alive include="a,b"><component :is="view"></component></keep-alive><!-- 正则表达式 (使用 `v-bind`) --><keep-alive :include="/a|b/"><component :is="view"></component></keep-alive><!-- 数组 (使用 `v-bind`) --><keep-alive :include="['a', 'b']"><component :is="view"></component></keep-alive>匹配首先检查组件自身的
name
选项,如果name
选项不可用,则匹配它的局部注册名称 (父组件components
选项的键值)。匿名组件不能被匹配。<keep-alive>
不会在函数式组件中正常工作,因为它们没有缓存实例。
slot
Props:
name
- string,用于命名插槽。
Usage:
<slot>
元素作为组件模板之中的内容分发插槽。<slot>
元素自身将被替换。详细用法,请参考下面教程的链接。
参考:使用插槽分发内容
VNode 接口
- 请参考 VNode class declaration。
服务端渲染
- 请参考 vue-server-renderer package documentation。