Vue-自定义全局指令和局部指令的方法详解

亦凉 2021-12-01 15:12 555阅读 0赞

##### 自定义全局指令 #####

*  语法：
    
    `Vue.directive ('Directive_Name',{Hook_Function:callback(el,binding)})`
    
     *  第一个参为指令名称，自定义指令时不需要加 v- 前缀，调用时必须要加 v- 第二个参数为配置项，是一个对象，里面主要包含一些和自定义指令执行相关的函数，通过对象中的函数可以在特定的阶段执行相关的操作
     *  `Directive_Name` 自定义指令的名称（不需要加 “**v-**”，约定全小写）；使用指令时必须要加 **v-**。
     *  `Hook_Function` 钩子函数
        
         *  `bind` 当指令绑定到元素上时，就会执行该函数，执行一次；此时元素还未插入到 DOM 中去。
            
             *  一般执行样式相关的操作。
         *  `inserted` 被绑定元素插入父节点时会调用该函数，执行一次。
            
             *  一般执行 `JS` 行为相关的操作。
         *  `update` 当 `vnode` 更新时执行该函数，可能执行多次。
     *  `el` 用来绑定指令的元素，是一个原生 DOM 对象。
     *  `binding` 记录自定义指令信息的对象，包含许多属性，例如：
        
         *  `name` 指令名，没有 `v-` 前缀。
         *  `value` 指令的绑定值（表达式计算完成后的值）。
         *  `expression` 指令绑定值的字符串形式（原样）。
    
    示例，实现文本框自动聚焦：
    
    `HTML:`
    
        <div id="app">
            <input type="text" name="" v-focus>
        </div>
    
    `JS:`
    
        Vue.directive('focus',{ 
            // bind(){} 当指令绑定到元素上时，就会执行该函数，执行一次。元素还未插入到 dom 中去，此时调用 focus() 方法无效（focus 是 原生js 的方法），所以必须在元素插入dom 之后才能调用该方法
            /*bind(el) { el.focus() },*/
            // 有效
            inserted(el) { 
                el.focus()
            },
            updated(el) { 
        
            }
        })
        
        new Vue({ 
            el: "#app",
            data: { 
                msg: '自定义指令'
            },
            methods: { 
        
            } 
        })
    
    示例，设置字体颜色：
    
    `HTML:`
    
        <div id="app">
            <h1 v-color="'skyblue'">自定义指令，修改字体颜色</h1>
        </div>
    
    `JS:`
    
        // 自定义全局字体颜色指令
        Vue.directive('color', { 
            bind(el, binding) { 
                el.style.color = binding.value  
            }
        })
        new Vue({ 
            el: "#app",
            data: { 
                msg: '自定义全局指令'
            },
            methods: { 
        
            } 
        })

##### 自定义局部指令 #####

定义方式：

*  在 `Vue` 实例中的 `directives` 属性中设置私有指令。
 *  `new Vue({ directives: {} })`

示例：

`HTML:`

<div id="app">
        <h1 v-fontSize="'20px'">自定义私有指令，修改字体大小</h1>
    </div>

`JS:`

new Vue({ 
        el: "#app",
        data: { '定义私有指令'},
        directives: { 
            'fontSize': { 
                bind(el, binding) { 
                    el.style.fontSize = paseInt(binding.value) + 'px'
                }
            }
        }
    })

##### 指令简写 #####

简写的指令会写入 `bind` 和 `update` 钩子函数中。

私有指令简写方式：

`'Directive_Name': callback(el, binding)`

全局指令简写方式：

`Vue.directive('Directive_Name', callback(el, binding))`