目录

自定义指令

自定义指令的分类

私有自定义指令：

全局自定义指令：

总结

自定义指令

vue官方提供了v-text、v-for、v-model、v-if等常用的指令，还允许开发者自定义指令。

自定义指令的分类

私有自定义指令：

在每个vue组件中，可以在directives节点下声明私有自定义指令。代码如下：

注意：directives节点下定义的指令名称必须是要渲染标签样式的 v-指令的v-后面的名称。

bind函数：

指令与元素成功绑定时执行bind函数。

当然我们也可以为自定义指令赋予静态值和动态值。如下：

inserted函数：

指令所在元素被插入页面时调用。

update函数：

bind函数只调用1次，也就是说：当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发。updated函数会在每次DOM更新时被调用。代码如下：

注意：bind函数和update函数两者的区别是bind函数是第一次被执行往后都不执行了，而update函数是第一次不执行，往后都执行，所以两者是都需要的，不能只写一个。

函数简写：

如果 bind 和 update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写为函数格式：

// 私有自定义指令节点
directives:{color(el,binding){el.style.color = binding.value}
},

全局自定义指令：

全局共享的自定义指令需要通过 Vue.directive() 进行声明，代码如下：注意：全局声明的自定义指令或者说之前讲解的全局声明的过滤器都要放到 main.js 中去声明。

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 全局自定义指令
Vue.directive('color',function(el,binding){el.style.color = binding.value
})// 创建 Vue 的实例对象
new Vue({// 把render函数指定的组件，渲染到 HTML 页面中。render: h => h(App),
}).$mount('#app')

总结

定义语法：

1）局部指令

new Vue({ directives:{指令名:配置对象} }) 或 new Vue({ directives:{指令名:回调函数} })

2）全局指令

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

配置对象中常用的3个回调

1、bind指令：指令与元素绑定时使用

2、inserted指令：指令所在元素被插入页面时使用

3、update指令：所在模板结构被重新解析时使用

3）注意

1、指令定义时不加 v- ，但使用时要加 v-

2、指令名如果是多个单词，要使用kebab-case命名方式，例：v-big-house