目录

一、自定义指令

        1、局部注册和使用

        2、全局注册和使用

二、自定义指令处理图片加载失败（碎图）

一、自定义指令

        vue中除v-model、v-show等内置指令之外，还允许注册自定义指令，获取DOM元素，扩展额外的功能。

        1、局部注册和使用

        注册在组件内的script内的directives内

export default {directives:{focus:{ //自定义指令名inserted(el){ //el就是使用此指令的DOM元素，此处el指这个input框el.focus() //此el对应的DOM元素自动获取焦点}}}
};

        使用时，v-自定义指令名即可

        2、全局注册和使用

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

Vue.directive('Color', {inserted(el, binding) { //el代表此DOM元素，binding.value接收传递过来的参数el.style.color = binding.value //给此DOM元素设置文字颜色},update(el, binding) { //使用此指令的DOM更新就执行此方法el.style.color = binding.value}
})

        所有的.vue文件都可直接使用

修改文字颜色

注意点： inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
                 update方法 - 指令对应数据/标签更新时, 此方法执行，只要更新就触发 

                el参数为使用此自定义指令的DOM元素

                binding参数用来接收传的值，binging.value就是具体值

二、自定义指令处理图片加载失败（碎图）

        1、在main.js中注册自定义指令，接收传递的值

Vue.directive('imgerror', {inserted(el, bindings) {el.onerror = function() { //当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerrorel.src = bindings.value //加载失败, 给一张默认图展示}    }    
})

        2、组件中使用自定义指令值处理，

        imgDefault1为用户可能出错的图，

        imgDefault为正确的图，当用户图地址加载失败时，使用这个默认图，

        img1为本地的图片，当用户没有图片数据，或数据为空时，加载此默认图

        补充：组件内直接使用图片方式