目录
Vue 2.x API
全局配置
silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip
属性
$data
$props
$el
$options
$parent
$root
$children
$slots
$scopedSlots
$refs
$isServer
$attrs
$listeners
特殊属性
key
ref
is
slot
slot-scope
scope
数据【实例方法】
$watch
$set
$delete
事件
$on
$once
$off
$emit
全局函数
Vue.extend
Vue.nextTick
Vue.set
Vue.delete
Vue.directive
Vue.filter
Vue.component
Vue.use
Vue.mixin
Vue.compile
Vue.observable
Vue.version
数据【选项】
data
props
propsData
computed
methods
watch
DOM
el
template
render
renderError
指令
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once
生命周期
$mount
$forceUpdate
$nextTick
生命周期调用方法
beforeCreate
created
beforeMount
Mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
资源
directives
filters
components
组件
Component
transition
transition-group
keep-alive
slot
组合
parent
mixins
extends
provide/inject
其它
name
delimiters
functional
model
inheritAttrs
comments
Vue 2.x APIAPI全称为Application Programming Interface,即应用程序接口。
全局配置 Vue.config 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改其中的一些属性。
silent
是否 取消 Vue 所有的日志与警告,默认值为false。
optionMergeStrategies
自定义合并策略的选项,默认值为{}。
devtools
是否 允许 vue-devtools 检查代码,开发版本默认值为 true,生产版本默认值为 false。
生产版本设为 true 可以启用检查。
errorHandler
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue 实例。
用法:
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
// 只在 2.2.0+ 可用
}
warnHandler
为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效,在生产环境下它会被忽略。
ignoredElements
使 Vue 忽略在 Vue 之外的自定义元素 【使用了 Web Components APIs】。
keyCodes
给 v-on 自定义键位别名。
performance
是否 在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。默认为false。只适用于开发模式和支持 performance.mark API 的浏览器上。
productionTip
是否 在 vue 启动时生成生产提示。默认为true。
属性 $data
Vue 实例观察的数据对象【object】。
Vue 实例代理了对其 data 对象 property 的访问。
$props
当前组件接收到的 props 对象【object】。
Vue 实例代理了对其 props 对象 property 的访问。
$el
Vue 实例使用的根 DOM 元素【Element】。
$options
用于当前 Vue 实例的初始化选项【object】。
$parent
父实例,如果当前实例有的话【Vue instance(Vue 实例)】。
$root
当前组件树的根 Vue 实例【Vue instance】。
如果当前实例没有父实例,此实例将会是其自己。
$children
当前实例的直接子组件【Array
注意:
$children 并不保证顺序,也不是响应式的。所以在使用 $children 来进行数据绑定时,可以考虑使用一个数组配合 v-for 来生成子组件。
$slots
用来访问被插槽分发的内容【 [name: string]: ?Array
在使用渲染函数书写一个组件时,访问 vm.$slots 最有帮助。
注意:
插槽不是响应性的。如果需要一个组件可以在被传入的数据发生变化时重渲染,建议使用诸如 props 或 data 等响应性实例选项。
$scopedSlots
用来访问作用域插槽【[name: string]: props => Array
vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。
注意:从 2.6.0 开始,这个 property 有两个变化:
(1).作用域插槽函数现在保证返回一个 VNode 数组,除非在返回值无效的情况下返回 undefined。
(2).所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。在使用渲染函数时,不论当前插槽是否带有作用域,都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单,也可以轻松迁移到所有插槽都是函数的 Vue 3。
$refs
一个对象【Object】,持有注册过 ref attribute 的所有 DOM 元素和组件实例。
$isServer
当前 Vue 实例 是否 运行于服务器【boolean】。
$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)【[key: string]: string】。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器【[key: string]: Function | Array
它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
特殊属性 key
key【number | string | boolean | symbol】主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能地尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key,重复的 key 会造成渲染错误。
最常见的用例是结合 v-for。
key 也可以用于强制替换元素/组件而不是重复使用它。在如下场景时它可能会很有用:
1. 完整地触发组件的生命周期钩子。
2. 触发过渡。
ref
ref【string】被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
如果用在子组件上,引用就指向组件。
注意:
因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候不能访问它们 。
$refs 不是响应式的,因此不应该试图用它在模板中做数据绑定。
is
is【string | Object (组件的选项对象)】用于动态组件且基于 DOM 内模板的限制来工作。
示例代码:
slot
废弃。【string】用于标记往哪个具名插槽中插入子组件内容。
推荐改用 2.6.0 新增的 v-slot。
slot-scope
废弃。【function argument expression】用于将元素或组件表示为作用域插槽。
推荐改用v-slot。
scope
移除。用于表示一个作为带作用域的插槽的 元素。
推荐改用v-slot。
数据【实例方法】 $watch
语法:
vm.$watch( expOrFn, callback, [options] )
参数
options【object】
(1). deep【boolean】:是否监听对象内部值的变化。
(2). .immediate【boolean】:是否 立即以表达式的当前值触发回调。
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式,用一个函数取代。
vm.$watch 返回一个取消观察函数,用来停止触发回调。
示例代码:
{{id}}:{{str}}
注意:
在变更 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。
$set
全局 Vue.set 的别名。返回值为设置的值。
语法:
vm.$set( target, propertyName/index, value )
$delete
全局 Vue.delete 的别名。
语法:
vm.$delete( target, propertyName/index )
事件 $on
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
语法:
vm.$on( event, callback )
$once
监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。
语法:
vm.$once( event, callback )
$off
移除自定义事件监听器。
语法:
vm.$off( [event, callback] )
参数
如果没有提供参数,则移除所有的事件监听器;
如果只提供了事件,则移除该事件所有的监听器;
如果同时提供了事件与回调,则只移除这个回调的监听器。
$emit
触发当前实例上的事件。附加参数都会传给监听器回调。
语法:
vm.$emit( eventName, […args] )
示例代码:
全局函数 Vue.extend
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
语法:
Vue.extend( options )
示例代码:
注意:
data 选项是特例,在 Vue.extend() 中它必须是函数。
Vue.nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
语法:
Vue.nextTick( [callback, context] )
参数
callback【function】
context【object】
如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。
示例代码:
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})// 作为一个 Promise 使用
Vue.nextTick()
.then(function () {
// DOM 更新了
})
注意:
Vue 不自带 Promisepolyfill,解决办法可参考 文档《Shim、Polyfill》。
Vue.set
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property。
返回设置的值。
语法:
Vue.set( target, propertyName/index ,value)
参数
target【Object | Array】
propertyName【string】/index【number】
value【any】
注意:
目标对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
Vue.delete
删除对象的 property。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制。
语法:
Vue.delete( target, propertyName/index )
注意:
目标对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
Vue.directive
注册或获取全局指令。
语法:
Vue.directive( id, [definition] )
参数
id【string】
definition【Function | Object】
Vue.filter
注册或获取全局过滤器。可以在一个组件的选项中定义本地的过滤器,也可以在在创建 Vue 实例之前全局定义过滤器。当全局过滤器和局部过滤器重名时,会采用局部过滤器。
语法:
Vue.filter( id, [definition] )
示例代码:
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
Vue.component
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称。
语法:
Vue.component( id, [definition] )
示例代码:
// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
Vue.use
安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
语法:
Vue.use( plugin )
参数
plugin【Object | Function】
注意:
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用,插件将只会被安装一次。
Vue.mixin
全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。
语法:
Vue.mixin( mixin )
参数
mixin【Object】
Vue.compile
将一个模板字符串编译成 render 函数。只在完整版时可用。
语法:
Vue.compile( template )
参数
template【string】
示例代码:
Vue.observable
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
语法:
Vue.observable( object )
返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景。
Vue.version
提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用,可以根据不同的版本号采取不同的策略。
示例代码:
数据【选项】 data
Vue 实例的数据对象【Object | Function】。
Vue 会递归地把 data 的 property 转换为 getter/setter,从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的 property 会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
实例创建之后,可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property,因此访问 vm.a 等价于访问 vm.$data.a。
一旦观察过,就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前,就声明所有的根级响应式 property。
注意:
- 组件的data设置只接受 function。当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。
- 如果需要,可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
props
props 【Array | Object】用于接收来自父组件的数据。
如果props是对象,则允许配置高级选项,如类型检测、自定义验证和设置默认值。可以基于对象的语法使用以下选项:
- type:【原生构造函数】String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。
- default:any。为该 prop 指定一个默认值,如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
- required:Boolean。定义该 prop 是否是必填项,在非生产环境中,如果这个值为true且该 prop 没有被传入的,则一个控制台警告将会被抛出。
- validator:Function。自定义验证函数会将该 prop 的值作为唯一的参数代入,在非生产环境下,如果该函数返回false【验证失败】,一个控制台警告将会被抛出。
示例代码:
// 简单语法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 对象语法,提供验证
var vm2=Vue.component('props-demo-advanced', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
var c2=new vm2({
propsData:{
height:123,
age:23
}
})
propsData
propsData【[key: string]: any 】用于创建实例时传递 props【只用于 new 创建的实例中】。主要作用是方便测试。
computed
计算【[key: string]: Function | { get: Function, set: Function }】属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
示例代码:
注意:
如果为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过仍然可以将其实例作为函数的第一个参数来访问。
methods
methods【[key: string]: Function】 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
示例代码:
注意:
不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。
watch
这里watch【[key: string]: string | Function | Object | Array 】是一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。
示例代码:
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',
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 可以传入回调数组,它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
注意:
不应该使用箭头函数来定义 watcher 函数 。
DOM el
【string | Element】提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
在实例挂载之后,元素可以用 vm.$el 访问。
如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。
注意:
只在用 new 创建实例时生效。
template
一个模板【string】作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
如果值以 # 开始,则它将被用作选择符,并使用匹配元素的 innerHTML 作为模板。常用的技巧是用
指令 v-text
【string】更新元素的 textContent。如果要更新部分的 textContent,需要使用 {{ Mustache }} 插值。
示例代码:
{{msg}}
v-html
【string】更新元素的 innerHTML。
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果针对 v-html 的内容设置带作用域的 CSS,可以替换为 CSS Modules 或用一个额外的全局元素手动设置类似 BEM 【Block Element Modify,块元素修改器】的作用域策略。
语法:
string">
注意:
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。
v-show
【any】根据表达式之真假值,切换元素的 display CSS property。
当条件变化时该指令触发过渡效果。
v-if
【any】根据表达式的值的真假来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ,将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。
示例代码:
可以看见
注意:
当和 v-for 一起使用时,v-for 的优先级比 v-if 更高。
v-else
为 v-if 或者 v-else-if 添加“else 块”。
v-else-if
【any】表示 v-if 的“else if 块”,可以链式调用。
示例代码:
ABCNot A/B/C
v-for
【Array | Object | number | string | Iterable】基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression,为当前遍历的元素提供别名。
语法:
不指定键名
{{ item.text }}
指定键名
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素,需要用特殊 attribute key 来提供一个排序提示。
示例代码一:
{{ item.text }}
示例代码二:
{{item}}序列号为{{index}}的值是:{{item}}{{item.name}}的年龄是:{{item.age}}岁{{index}}.{{name}}今年{{value.age}}岁了,所在班级是{{value.class}}。
注意:
从 2.6 起,v-for 也可以在实现了可迭代协议的值上使用,包括原生的 Map 和 Set。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值,所以无法自动探测变更。
v-on
【Function | Inline Statement | Object】v-on【可简写为@】用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。
修饰符:
stop- 调用 event.stopPropagation()。
prevent- 调用 event.preventDefault()。
capture- 添加事件侦听器时使用 capture 模式。
self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
native- 监听组件根元素的原生事件。
once- 只触发一次回调。
left- 只当点击鼠标左键时触发。
right- 只当点击鼠标右键时触发。
middle- 只当点击鼠标中键时触发。
passive- 以 { passive: true } 模式添加侦听器
使用语法示例:
可在子组件上监听自定义事件 。
示例代码:
//当子组件触发“my-event”时将调用事件处理器。
注意:
从 2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。
v-bind
【any (with argument) | Object (without argument)】动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。
在绑定 class 或 style attribute 时,支持其它类型的值,如数组或对象。
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
示例代码:
文章图片
文章图片
文章图片
修饰符:
prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。
camel - 将 kebab-case attribute 名转换为 camelCase【驼峰化】。
sync - 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
v-model
在表单控件或者组件上创建双向绑定。
修饰符:
lazy- 取消input事件后触发,转为change事件后触发。
number - 输入字符串转为有效的数字
trim- 输入首尾空格过滤
v-slot
【缩写#】提供具名插槽或需要接收 prop 的插槽。
示例代码:
Header content
Default slot content
Footer content
{{ slotProps.item.text }}
Mouse position: {{ x }}, {{ y }}
v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
示例代码:
{{ this will not be compiled }}
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
示例代码:
[v-cloak] {
display: none;
}{{ message }}
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
示例代码:
This will never change: {{msg}}comment{{msg}}
- {{i}}
生命周期 $mount
如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的元素,并且必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身,因而可以链式调用其它实例方法。
【前端开发|Vue2.x API 学习】示例代码:
$forceUpdate
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
$nextTick
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
语法:
vm.$nextTick( [callback] )
示例代码:
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})
注意:
如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promisepolyfill,解决办法可参考 文档《Shim、Polyfill》。
$destroy
完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子。
注意:
在大多数场景中都不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。
生命周期调用方法 所有的生命周期钩子自动绑定 this 上下文到实例中,因此可以访问数据,对 property 和方法进行运算。这意味着不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此this.fetchTodos 的行为未定义。
beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。
此钩子在服务器端渲染期间不被调用。
Mounted
实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted【已安装】 被调用时 vm.$el 也在文档内。
此钩子在服务器端渲染期间不被调用。
注意:
mounted 不会保证所有的子组件也都一起被挂载。可以等到整个视图都渲染完毕,在 mounted 内部使用 vm.$nextTick。
beforeUpdate
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以这时可以执行依赖于 DOM 的操作。然而在大多数情况下,应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
该钩子在服务器端渲染期间不被调用。
注意:
updated 不会保证所有的子组件也都一起被重绘。可以等到整个视图都重绘完毕,在 updated 里使用 vm.$nextTick。
示例代码:
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
activated
被 keep-alive 缓存的组件激活时调用。
该钩子在服务器端渲染期间不被调用。
deactivated
被 keep-alive 缓存的组件停用时调用。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
destroyed
实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。
errorCaptured
【(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 实例可用过滤器的哈希表。
components
【object】包含 Vue 实例可用组件的哈希表。
组件 Component
渲染一个“元组件”为动态组件。
Props:
is - string | ComponentDefinition | ComponentConstructor
inline-template - boolean
示例代码:
// 依 is 的值,来决定哪个组件被渲染。
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";默认同时进行。
duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。
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
示例代码:
toggled content
toggled content
new Vue({
...
methods: {
transitionComplete: function (el) {
// 传入 'el' 这个 DOM 元素作为参数。
}
}
...
}).$mount('#transition-demo')
transition-group
Props:
tag - string,默认为 span
move-class - 覆盖移动过渡期间应用的 CSS 类。
除了 mode,其他 attribute 和
事件:
事件和
示例代码:
{{ item.text }}
注意:
每个
keep-alive
Props:
include- 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max- 数字。最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
当组件在
示例代码:
注意:
1.
2.
slot
元素作为组件模板之中的内容分发插槽。 元素自身将被替换。
Props:
name - string,用于命名插槽。
组合 parent
【Vue Instance】指定已创建的实例之父实例,在两者之间建立父子关系。
子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。
注意:
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信。
mixins
【Array