怎么使用、为什么要使用Vue的自定义指令?

1.什么是自定义指令:
image.png
显然,同名的局部自定义指令会覆盖同名的全局自定义指令。

2.自定义指令的钩子:可以对比Vue的生命周期进行理解
怎么使用、为什么要使用Vue的自定义指令?_第1张图片
(2)inserted:其实此时已经插入文档中了,例子在上面

(3)update:可以理解为仅当绑定的值发生改变时才执行
怎么使用、为什么要使用Vue的自定义指令?_第2张图片
(4)componentUpdated:顾名思义吧,在update之后执行

(5)unbind:dom元素被删除之后执行
怎么使用、为什么要使用Vue的自定义指令?_第3张图片

3.上述钩子函数的参数:看文字不清晰,下面用代码加输出结果进行展示
怎么使用、为什么要使用Vue的自定义指令?_第4张图片

4.练习-----实现v-show:
怎么使用、为什么要使用Vue的自定义指令?_第5张图片

5.函数式简写:
怎么使用、为什么要使用Vue的自定义指令?_第6张图片

6.总结:就像v-show的小练习一样,我们同样可以使用自定义指令去模拟v-bind、v-model等很多很多指令,除了模拟之外,我们还可以编写一些自己的指令。写代码贵在想法,而想法也会随着经验的提升而变得越来越多。这就是编写代码的乐趣所在。继续为了写出漂亮的代码而努力!

你可能感兴趣的:(前端,vue.js,javascript)