<button @click="$router.push('/login')" v-botton>directive</button> export default { name: "directive", directives: { botton: { bind: function (el,binding,vnode) { //dom树绘制前调用 el为当前节点,binding为对象,很少用, vnode vue对象 }, inserted: function (el,binding,vnode) { //绘制后 父节点存在时 }, unbind: function (el,binding,vnode) { //销毁时 }, componentUpdated:function(el,binding,vnode){ //组件更新后的状态 }, update:function(el,binding,vnode){ //组件更新前的状态 } }, }
全局注册 在main.js
Vue.directive('directive-span',{ bind:function(el){ console.log(el) el.style.color='red' }, inserted:function(el){ console.log(el,'inserted') setTimeout(()=>{ el.style.color='blue' },2000) } })