全局 API
Vue.extend( options: 组件选项对象 )
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
创建其实例后可挂载在元素上。
new创建的子类().$mount('#mount-point')
Vue.nextTick( [callback: function, context] )
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
可在生命周期钩子函数中使用。
Vue.set( target: object, key, value )
设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。(注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。)
Vue.delete( target: Object, key )
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。
Vue.directive( id: string, [definition]: 单个或多个钩子函数对象 )
注册或获取全局指令。
通过在元素上添加属性 v-id 实现。
Vue.filter( id: string, [definition]: function )
注册或获取全局过滤器。(ng中的管道)。
Vue.filter('my-filter', function (value) { // 返回处理后的值 })
参数输入方法{{ message | my-filter('arg1', arg2) }}
Vue.component( id: string, [definition] )
注册或获取全局组件。注册还会自动使用给定的id
设置组件的名称。
注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* 组件选项 */ }))
Vue.use( plugin: function | object )
安装 Vue.js 插件。如果插件是一个对象,必须提供 install
方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。
Vue.mixin( mixin: 组件选项 )
全局注册一个混合,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混合,向组件注入自定义的行为。不推荐在应用代码中使用。
组件选项
属性方法
data: function
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。
(以 _
或 $
开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突)
实例创建之后,可以通过 vm.$data
访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a
等价于访问 vm.$data.a
。
data() {
return {prop: value}
}
props: Array<string> | Object
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。可以通过Vue实例访问。
props: ['size', 'myMessage']
propsData: { [key: string]: any }
创建实例时传递 props。主要作用是方便测试。
propsData: { msg: 'hello' }
computed: { [key: string]: Function | { get: Function, set: Function } }
计算属性将被混入到Vue实例中。所有getter和setter的this上下文自动地绑定为Vue实例。
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。
computed: { aPlus: { get: function () {return this.a + 1}, set: function (v) {this.a = v - 1} },
aDouble: function () {return …} }
methods: { [key: string]: Function }
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。
methods: { plus: function () {console.log(‘hello world’)} }
watch: { [key: string]: string | Function | Object }
一个对象,key是需要观察的data、props、computed属性,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()
,遍历 watch 对象的每一个属性。
watch: { key: function (newVal, oldVal) {…} }
DOM操作
render: (createElement: () => VNode) => VNode
通过render函数渲染组件元素内容。优先级低于.vue文件中<template>。
Vue 选项中的 render
函数若存在,则 Vue 构造函数不会从 template
选项或通过 el
选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
render: function (createElement) { return createElement(tagName, ElementNodes)
}
生命周期钩子
beforeCreate: Function
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created: Function
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。
beforeMount: Function
在挂载开始之前被调用:相关的 render
函数首次被调用。
mounted: Function
el
被新创建的 vm.$el
替换,并挂载到实例上去之后调用该钩子。
注意 mounted
不会承诺所有的子组件也都一起被挂载。
如果希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted
。
mounted: function () { this.$nextTick(function () {…}) }
beforeUpdate
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
注意 updated
不会承诺所有的子组件也都一起被重绘。
如果希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated
。
activated
keep-alive 组件激活时调用。
deactivated
keep-alive 组件停用时调用。
beforeDestroy: Function
实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed: Function
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
组件内指令、管道、组件
Directives: {[id: string]: {[definition]: function}}
注册局部指令。
directives: {
focus: {
inserted: function (el) { el.focus() }
}
}
filters: {[id: string]: function}
注册局部管道。
filters: {'my-filter': function (value) { // 返回处理后的值 }}
参数输入方法{{ message | my-filter('arg1', arg2) }}
components: {componentName, componentName}
局部注册组件。
组件组合
parent: Vue instance
指定已创建的实例之父实例,在两者之间建立父子关系。
不要用。
mixins: Array<Object>
接受引入的mixins。
mixins: [mixin]
extends: Object | Function | 其他组件
声明扩展另一个组件,这和 mixins
类似,区别在于,组件自身的选项会比要扩展的源组件具有更高的优先级。
extends: CompA,
provide / inject
· provide:Object | () => Object
· inject:Array<string> | { [key: string]: string | Symbol | Object }
(provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。)
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
组件杂项
name:string
组件命名,只有作为组件选项时起作用。
delimiters:Array<string>
默认值:["{{", "}}"]
改变纯文本插入分隔符。
functional:boolean
使组件无状态 (没有 data
) 和无实例 (没有 this
上下文)。他们用一个简单的 render
函数返回虚拟节点使他们更容易渲染。
Model:{ prop?: string, event?: string }
默认情况下,一个组件上的 v-model
会把 value
用作 prop 且把 input
用作 event。
允许一个自定义组件在使用 v-model
时定制 prop 和 event。
inheritAttrs:boolean
默认值:true
默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。通过设置 inheritAttrs
到 false
,这些默认行为将会被去掉。
comments:boolean
当设为 true
时,将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。
组件实例
属性实例
vm.$data:Object
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
可以通过this.data访问对应data。
vm.$props:Object
当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
可以通过this.prop访问对应prop。
vm.$el:HTMLElement
表示Vue 组件使用的最外层DOM元素。
vm.$options:Object
用于当前 Vue 实例的初始化选项。用于访问在选项中包含的自定义属性选项。
vm.$parent:Vue instance
用于访问组件的父组件实例。
vm.$root:Vue instance
当前组件树的根组件实例。如果当前实例没有父实例,此实例将会是自己。
vm.$children:Array<Vue instance>
当前实例的直接子组件。需要注意 $children
并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children
来进行数据绑定,考虑使用一个数组配合 v-for
来生成子组件,并且使用 Array 作为真正的来源。
vm.$slots:{ [name: string]: ?Array<VNode> }
用来访问被插槽分发的内容。default
属性包括了所有没有被包含在具名插槽中的节点。
vm.$scopedSlots:{ [name: string]: props => VNode | Array<VNode> }
用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。
作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
vm.$refs:Object
访问局部模板变量。
vm.$isServer:boolean
当前 Vue 实例是否运行于服务器。
vm.$attrs:{ [key: string]: string }
包含了父作用域中不作为 prop 被识别 (没有被获取的prop) 的特性绑定。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class
和 style
除外),并且可以通过 v-bind="$attrs"
传入内部组件。
vm.$listeners:{ [key: string]: Function | Array<Function> }
包含了父作用域中的 (不含 .native
修饰器的) v-on
事件监听器。它可以通过 v-on="$listeners"
传入内部组件。
实例事件
vm.$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit
触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
vm.$once( event, callback ) 同上
vm.$off( [event, callback] )
移除自定义事件监听器。
vm.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。
内置的组件
component
Props:
· is - string | ComponentDefinition | ComponentConstructor
· inline-template - boolean
渲染一个“元组件”为动态组件。依 is
的值,来决定哪个组件被渲染。
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>
<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>
transition
<transition>
元素作为单个元素/组件的过渡效果。<transition>
只会把过渡效果应用到其包裹的内容上。
transition-group
<transition-group>
元素作为多个元素/组件的过渡效果(数组)。<transition-group>
渲染一个真实的 DOM 元素。默认渲染 <span>
。
注意,每个 <transition-group>
的子节点必须有 独立的 key ,动画才能正常工作。
keep-alive
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
slot
<slot>
元素作为组件模板之中的内容分发插槽。<slot>
元素自身将被替换。
特殊Attr
key:number | string
使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
Key变化时重新渲染对应的DOM元素。
ref:string
指定局部模板变量。
slot:string
用于标记往哪个具名插槽中插入子组件内容。
slot-scope:function argument expression
用于将元素或组件表示为作用域插槽。
is
用于动态组件且基于 DOM 内模板的限制来工作。
<component v-bind:is="currentView"></component>