Vue入门-自定义指令

自定义指令
当需要对普通DOM元素进行底层操作时,可以考虑自定义指令来实现。
语法: Vue.directive(指令名,配置对象)。

1.创建全局指令  特点:可以在任意不同的实例对象挂载的范围进行使用

 Vue.directive('highlight', {
           bind(el, binding) {
               console.log(el, binding);
               el.style.background = 'red';
               el.onmouseover = function () {
                   this.style.background = binding.value;
               };
               el.onmouseout = function () {
                   this.style.background = '';
               };
           },
           // 指令所绑定的值, 再次改变的时候, 才会触发
           update(el, binding){
               console.log(el, binding);
               el.style.background = 'red';
               el.onmouseover = function () {
                   this.style.background = binding.value;
               };
               el.onmouseout = function () {
                   this.style.background = '';
               };
           }
       });

2.创建局部指令  特点:在指定的实例对象挂载范围内使用

        directives: {
            useless: {
                // 需要访问该指令所绑定元素的父级,必须要在inserted钩子中.
                bind(el, binding) {
                    // 输出的结果为:null
                    console.log('bind:', el, el.parentElement);

                },
                inserted(el, binding) {
                    // 输出的结果为:app标签, 即对应的父级标签
                    console.log('inserted:', el, el.parentElement);
                    if (binding.value === true) {
                        el.parentElement.removeChild(el);
                    }
                }
            },
            focus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        }

参考代码：

    
    
    



    

        
        
鼠标移入该标签时，标签高亮显示
        改变color的值,鼠标移入h1标签查看效果改变
        

            
娱乐头条
            
二本毕业生简历直接被扔进垃圾箱
        
    
    

        
鼠标移入该标签时，标签高亮显示
    
    
不在任何实例中,不能使用全局指令,便不会有自定义指令的高亮效果

效果图对比