Vue.use(plugins) 注册一个插件
例子:
import Vue from 'vue'
import Router from 'vue-router'
// 不要忘了调用此方法
Vue.use(VueRouter)
Vue.directive()创建或者获取自定义指令
// 注册(指令函数)
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')
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。 -
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind
:只调用一次,指令与元素解绑时调用。
钩子函数的参数 有(el
、binding
、vnode
和oldVnode
)。
组件内局部添加:
export default {
name: 'FilterDemo',
/* 局部指令 */
directives:{
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
},
data () {
return {
}
}
}
Vue.filter() 注册或者获取全局的过滤器
用在v-bind或者{{}}插入值之后,用 |
隔开
参数:
{string} id
{Function} [definition]
定义过滤器有两种方式,
(1) 全局过滤器,我们可以直接在vue对象上使用filter方法注册过滤器,这种全局注册的过滤器在任何一个组件内都可以使用。
(2)组件内部的过滤器,注册组件内部过滤器则只能在当前组件内使用,接下来我们使用这两种方式注册过滤器函数。
例子:
//全局过滤器
import Vue from 'vue';
Vue.filter('formatString', function (value) {
var msg = value.length > 10 ? value.slice(0,3): value;
return msg;
});
//局部过滤器
export default {
name: 'FilterDemo',
/* 局部过滤器 */
filters:{
formatString: function(value){
var msg = value.length > 10 ? value.slice(0,3): value;
return msg;
}
},
data () {
return {
}
}
}
//使用
<template>
<div id="app">
{{msg | formatString}}
{{student.name | formatString}}
<ChildComponent v-bind:message="msg | formatString"></ChildComponent>
</div>
</template>
Vue.nextTick([callback,context]) 在DOM更新之后调用回调函数
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
参数:
{Function} [callback]
{Object} [context]
例子:
//全局
Vue.nextTick(function () {
// DOM 更新了
});
//组件内部
export default {
name: 'App',
data(){
return {
msg: "启动测试页面啦啦啦",
student: {
name: 1,
age: 2,
}
}
},
mounted(){
this.msg="已经更新完毕";
//也可以在methods方法里面添加
this.$nextTick(function(){
console.log("nextTick操作")
})
}
Vue.set(target, propertyName/index, value) 或者 this.$set(target, propertyName/index, value)
向响应式数据添加一个属性,并且保证该属性也是响应式的,且能够触发视图的更新。
export default {
name: 'App',
data(){
return {
msg: "启动测试页面啦啦啦",
student: {
name: 1,
age: 2,
}
}
},
mounted(){
this.$set(this.student, "sex","女");
}
}
Vue.delete( target, propertyName/index )
删除一个对象的属性,如果属性是响应式的,确保删除属性并且更新视图
Vue.mixin()
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
Vue.compile(template)
参数: template {string}
在 render 函数中编译模板字符串。只在独立构建时有效
Vue.observable( object )
让一个对象可响应。Vue 内部会用它来处理 data
函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:
const state = Vue.observable({ count: 0 })
const Demo = {
render(h) {
return h('button', {
on: { click: () => { state.count++ }}
}, `count is: ${state.count}`)
}
}
在 Vue 2.x 中,被传入的对象会直接被 Vue.observable
改变,所以如这里展示的,它和被返回的对象是同一个对象。在 Vue 3.x 中,则会返回一个可响应的代理,而对源对象直接进行修改仍然是不可响应的。因此,为了向前兼容,我们推荐始终操作使用 Vue.observable
返回的对象,而不是传入源对象。