Vue自定义指令的使用详细介绍_vue.js_

1. 概述

除了核心功能默认内置的指令，Vue也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令绑定到元素上执行相关操作。

自定义指令分为：

全局指令和局部指令，当全局指令和局部指令同名时以局部指令为准。

局部指令：只对当前实例（或组件）生效

全局指令：对全部实例（或组件）都生效

2. 钩子函数

自定义指令常用钩子函数：

1. bind 第一次绑定到元素时调用（初始化）
2. inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
3. update 数据更新时调用
4. componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5. unbind 只调用一次，指令与元素解绑时调用。

指令的钩子会传递以下几种参数：

el：指令绑定到的元素。这可以用于直接操作 DOM。

binding：一个对象，包含以下属性。

1. value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
2. oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
3. arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
4. modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
5. instance：使用该指令的组件实例。
6. dir：指令的定义对象。

vnode：代表绑定元素的底层 VNode。

prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

钩子函数可以理解为一个类，类中的构造函数绑定了5个函数（即钩子函数），当我们自定义钩子函数时，就会初始化这个类，然后让我们的相关代码按顺序执行这5个函数。

有关钩子函数更详细的解释，下面这篇文章中的前两个教程写得很通俗易懂，特此推荐：

传送门

钩子函数的执行顺序：

程序一执行，当数据源中的数据第一次绑定了元素就会执行bind函数，当绑定元素插入到父元素中，即显示到视图中时，会执行inserted函数：

当我们改变视图，使得数据发生改变时，就会执行update和componentUpdated函数：

当我们销毁被绑定元素时，即被绑定元素和数据源解绑，就会触发unbind函数：

3. 自定义全局指令

描述：

全局定义的指令，所有的组件或vue的实例都会生效。

语法：

Vue.directive('指令名称，不需要写v-开头',对象或函数)

Vue.directive('test',{ bind(el,bind){ console.log(el) } }) 

案例：

{{title}}
标题2

4. 自定义局部指令

描述：

定义局部指令，只有当前的实例能用。

语法：

new Vue({ directives: { test:{ bind(el,bind){} }, // bind/update test2(el,bind){} } }) 

案例：

{{title}}
标题2

利用自定义局部指令操作Dom：

{{title}}
标题2

注意：在上面的代码中，我们在bind函数中，不能获取当前被绑定元素的父节点，因为此时被绑定元素刚刚初始化，还没有插入到父节点当中。在inserted函数中才能获取被绑定元素的父节点，因为此时元素已经插入到父节点当中去了。

5. 使用自定义指令实现权限管理

目标：

根据地址栏中的数据，决定是否显示 button 按钮。如果地址栏中的 username 的值是 admin 时，就显示 button 按钮，否则不显示。

注意：目标中的显示与不显示，是取决于该 Dom 元素（button 按钮）是否存在，而不是通过 css 来进行显示与隐藏。

代码：

查看工资

6. 使用自定义指令实现表单验证

首先我们先完成验证手机号的功能。

目标：

在初始化（在 bind 函数中进行）和更新数据（在 update 函数中进行）时都要进行手机号的验证。

思路：

先获取手机号（收集数据），再用正则表达式判断输入框中的手机号是否合法，如果合法则手机号显示黑色，如果不合法则手机号显示红色。

代码：

在上面代码中，通过钩子函数完成数据获取与验证，代码重复率高，所以在钩子函数部分，我们可以简写成下面这种方式：

Vue.directive('phone', (el, { value }) => { // 手机号码 let reg = /^1[3-9]\d{9}$/ if (!reg.test(phone)) { // 不合法 el.style.color = 'red' } else { el.style.color = 'black' } }) 

注意：简写方式就是自定义指令语法中，第二个参数是函数的写法。自定义指令的简写，指的是将 bind 函数和 update 函数封装起来的写法。

在上面的基础上，我们再加上验证错误信息的显示：

最后，我们使用模块化的的思路，将案例完善一下：

提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：react父组件更改props子组件无法刷新原因及解决方法_React_
                                                                
下一篇：关于axios配置多个请求地址(打包后可通过配置文件修改)_vue.js_
                                    
            
        
        

            
相关内容
            

                                    
react父组件更改props子组件无法刷新原因及解决方法_React_
                                    
多个vue项目实现共用一个node-modules文件夹_vue.js_
                                    
关于vue-i18n在单文件js中的使用_vue.js_
                                    
vue中iframe使用以及结合postMessage实现跨域通信_vue.js_
                                    
Vue混入与插件的使用介绍_vue.js_
                                    
JS网页repaint与reflow 的区别及优化方式_JavaScript_
                                    
Vue网络请求的三种实现方式介绍_vue.js_
                                    
React中编写CSS实例详解_React_
                                    
vue中手动封装iconfont组件解析(三种引用方式的封装和使用)_vue.js_
                                    
在vue项目中(本地)使用iconfont字体图标的三种方式总结_vue.js_