一,全局Api
// 获取更新后的 DOM
1, Vue.nextTick( ()=>{} )
// 设置对象属性的新增,确保该属性是响应式的。
2,Vue.set(target, propertyName/index, value)
// 删除对象属性,确保删除能更新视图。
3,Vue.delete( target, propertyName/index )
// 注册或获取全局指令
4,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')
// 注册或获取全局组件
5,Vue.component('my-component', { /* ... */ })
// 安装 Vue.js 插件
6,Vue.use( plugin ):参数为对象或者函数
// 全局混入
7,Vue.mixin( mixin ):参数为object
二,选项/组合provide / inject
provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }
三,选项/其他 model
// 1,允许一个自定义组件在使用 v-model 时定制 prop 和 event。
// 2,默认情况下,一个组件上的 v-model 会把 value 用作 prop,input 用作 event
// 3,一些输入类型比如单选框和复选框按钮value有其他作用,故:
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>
四,实例属性 ref, $attrs, $listeners,$props
// 一个对象,可以获取到该ref组件上的所有属性和方法
1,vm.$refs
// 组件标签上绑定的非props的特性(class和style除外)向下传递
2,vm.$attrs
可以通过 v-bind="$attrs" 传入内部组件,
// 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器
3,vm.$listeners
可以通过 v-on="$listeners" 传入内部组件
// 当前组件接收到的 props 对象。
4, vm.$props
可以通过v-bind="$props"父组件的所有props下发给它的子组件,
子组件需要在其props:{} 中定义要接受的props
//
五,实例方法 $on, $emit, $watch, $set, $nextTick, $forceUpdate()