需要知道的知识:
自定义指令中生命周期分为五个阶段,分别是
bind, // DOM渲染前
inserted, // DOM渲染后
update, // DOM更新时
componentUpdate, // DOM更新完成后
unbind // 指令销毁
1.新建一个文件夹directives,里面新建一个index.js文件
2.index.js文件中如下配置
示例一个img图片加载异常的自定义处理指令
export default {
imgError:{
insert(dom,obj,vnode){
if(dom.src){ // 对标签里的src属性做判断,如果存在,就优先使用原本的src路径,如果报错了,就用设置的传入参数作为替换
dom.src=dom.src || obj.value
dom.onerror = function(){
dom.src = dom.value
}
}},
componentUpdated(dom,obj,vnode){ //当更新之后,还是优先原本达到src路径,上面的onerror是全局错误监听事件
dom.src = dom.src || obj.value
},
unbind(dom,obj,vnode){ // 清除监听事件
dom.onerror = null
}
}
}
3.在main.js中导入,并注册
import directives from ‘@/directives’
Object.keys(directives).forEach(item=>{ //Object.keys(),对对象属性进行遍历
Vue.directive(item,directives[item])
})