自定义指令
什么是自定义指令
vue官方提供了v-text、v-for、v-if、v-model等指令，此外vue还允许开发者自定义指令
私有自定义指令
在directives节点下声明私有自定义指令
<script> export default { // 私有自定义指令的节点 directives: { // 定义名为color的指令，指向一个配置对象 color: { // 当指令第一次被绑定到元素上的时候，会立即触发bind函数 // 形参el表示当前指令所绑定的那个DOM对象(element) bind(el){ console.log('触发了v-color的bind函数') el.style.color = 'red' // 将相应DOM对象的文字改为红色 } } } } </script>
<!-- 使用自定义指令 --> <template> <h1 v-color>自定义指令color</h1> <!-- 触发v-color指令时，会立刻调用里面的bind函数 --> <!-- h1内的文字会变成红色 --> </template>
bind函数的第二个形参binding(官方的写法，写作别的名字如obj也可以)
<template> <h1 v-color="color">使用变量指定属性值,由data的数据</h1> <h2 v-color=" 'red' "> </h2> <!-- 注意不带引号是变量，带引号才是一个表达式的值 --> </template>
<script> export default { data(){ color: blue }, // 私有自定义指令的节点 directives: { // 定义名为color的指令，指向一个配置对象 color: { // 形参el表示当前指令所绑定的那个DOM对象 bind(el, binding){ console.log('触发了v-color的bind函数') console.log(binding) // binding绑定的意思 // 打印binding得到一个对象，其中的value属性就是使用指令时传递的数据 el.style.color = binding.value // 使用 用户指定的颜色 } } } } </script>
自定义属性中的update函数
bind函数的缺点：只能在自定义属性第一次绑定到元素上的时候触发一次，当数据改变的时候(DOM更新的时候)，不会自动触发bind函数，因而页面也不会重新渲染
update函数会在每次DOM更新时被调用(指令所在的模板被重新解析时)
<script> export default { directives: { // 定义名为color的指令，指向一个配置对象 color: { // 形参el表示当前指令所绑定的那个DOM对象 bind(el, binding){ console.log('触发了v-color的bind函数') el.style.color = binding.value }, // 每次DOM更新时被调用 update(el, binding){ console.log('触发了v-color的update函数') el.style.color = binding.value } } } } </script>
函数简写
上面的bind函数和update函数中的逻辑完全相同，这种情况下 对象格式的自定义指令 可以简写为函数格式
<script> export default { directives: { // 在bind函数和update函数中会触发相同的业务逻辑 // color: function(el, binding){ } color(el, binding){ el.style.color = binding.value } } } </script>
补充：
- 我们之前写了 自定义指令与元素成功绑定时(一上来)就调用bind函数，每次DOM更新时(指令所在的模板被重新解析时)调用update函数，这都能实现自定义指令的操作。此外，还有一个时间点，就是自定义指令所在的元素被插入到页面的时候，就会调用inserted函数
<script> export default { directives: { color: { // 自定义指令与元素成功绑定时(一上来)就调用bind函数 bind(element,binding){}, // 自定义指令所在的元素被插入到页面的时候，就会调用inserted函数 inserted(element,binding){}, // 每次DOM更新时(指令所在的模板被重新解析时)调用update函数 update(element,binding){} } }) } </script>
- 所有由Vue管理的函数，他们的this都指向的是vm实例对象；而directives节点里面的自定义指令中的函数，他们的this都指向的是window(因为这些函数都是要操作DOM的)
全局自定义指令
全局共享的自定义指令需要通过 Vue.directive( ) 进行声明
注意：全局声明的自定义指令、过滤器等都要写在main.js里面
// 在main.js里面写入 // 参数1：字符串，表示全局自定义指令的名字 // 参数2：对象，用来接收指令的参数值 Vue.directive('color', { bind(el, binding){ console.log('触发了v-color的bind函数') el.style.color = binding.value }, // 每次DOM更新时被调用 update(el, binding){ console.log('触发了v-color的update函数') el.style.color = binding.value } } // 函数形式简写 Vue.directive('color', function(el, binding){ el.style.color = binding.value })
