话不多说先看效果,这个效果是用在真实项目中的实际效果哈:
![15b69ab3c9c025f7973f46e88760c0aa.gif](https://i-blog.csdnimg.cn/blog_migrate/9b70da9b50f0cfd782933ed31192a738.gif)
指令是啥?
按照惯例,先请出官方的解释:
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
再按照惯例,大家 ( 假装 ) 看不懂,然后我来举个栗子解释一番。。。好,还是不知所云,本文结束 ( Ctrl + F4 ) ,下一篇。
为了避免上述情况出现,就不解释了。实际上官方提供了很多内置指令,如:v-if、v-for、v-bind and so on。每一个指令都有自己特定的功能。
自定义指令
顾名思义就是自己定义的指令啦,可以实现我们想要的功能。下面就实现一个 一键 Copy 的功能吧。
生命周期
首先简单瞟一下指令的语法,每个指令都有自己的生命周期,看到生命周期,肯定会想到钩子函数,没错,指令也提供了钩子函数:
- bind:指令第一次绑定到元素时调用,此钩子只会调用一次。在这里可以进行