vue注册新节点_全局注册Vue.directive

1.src目录下新建directives文件

export default {

install: function(Vue, option) {

// 1：el指绑定的dom元素

// 2：binding一个对象，包含指令的很多信息, 使用时可以绑定的值

// 3：vnodeVUE编译生成的虚拟节点

Vue.directive(‘focus‘, {

bind: function (el, binding, vnode) {

el.style[‘color‘] = binding.value

}, // 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。

inserted: function () {}, // 被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)

update: function () {}, // 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新

componentUpdated: function () {}, // 被绑定的元素所在模板完成一次更新更新周期的时候调用

unbind: function () {} // 只调用一次，指令元素解绑的时候调用

})

}

}

2.min.js中全局引入

import directive from ‘./directive/directive‘ //引入directive

Vue.use(directive)//引入directive

3.组件中使用自定义指令

点我

name:‘BigScreen‘,

data() {return{

color:‘red‘}

}

}

原文：https://www.cnblogs.com/wjsy/p/12174941.html