冇事来学系--Vue2.0中自定义指令

---

theme: cyanosis

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

自定义指令

什么是自定义指令

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

私有自定义指令

在directives节点下声明私有自定义指令

```js

```

js <!-- 使用自定义指令 --> <template> <h1 v-color>自定义指令color</h1> <!-- 触发v-color指令时，会立刻调用里面的bind函数 --> <!-- h1内的文字会变成红色 --> </template>

---

bind函数的第二个形参binding(官方的写法，写作别的名字如obj也可以)

```js

使用变量指定属性值,由data的数据

```

```js

```

---

自定义属性中的update函数

bind函数的缺点：只能在自定义属性第一次绑定到元素上的时候触发一次，当数据改变的时候(DOM更新的时候)，不会自动触发bind函数，因而页面也不会重新渲染

update函数会在每次DOM更新时被调用(指令所在的模板被重新解析时)

```

```

函数简写

上面的bind函数和update函数中的逻辑完全相同，这种情况下 对象格式的自定义指令 可以简写为函数格式

```

```

---

补充：

1. 我们之前写了 自定义指令与元素成功绑定时(一上来)就调用bind函数，每次DOM更新时(指令所在的模板被重新解析时)调用update函数，这都能实现自定义指令的操作。此外，还有一个时间点，就是自定义指令所在的元素被插入到页面的时候，就会调用inserted函数

```js

```

2. 所有由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 })

```

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖