编程知识 cdmana.com

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

1.什么是自定义指令:
image.png
看完这段话,仍然是云里雾里。。。来看代码:
image.png
看看效果:
image.png
同时使用全局自定义指令:
image.png
效果:
image.png
仍然好使,并且不报错,那么优先级又是怎样的呢?
image.png
效果:
image.png
显然,同名的局部自定义指令会覆盖同名的全局自定义指令。

2.自定义指令的钩子:可以对比Vue的生命周期进行理解
image.png
(1)bind:此时的DOM元素并没有挂载到页面上
image.png
观察结果,发现focus()方法并不会生效:
image.png
(2)inserted:其实此时已经插入文档中了,例子在上面

(3)update:可以理解为仅当绑定的值发生改变时才执行
image.png
效果:
image.png
(4)componentUpdated:顾名思义吧,在update之后执行

(5)unbind:dom元素被删除之后执行
image.png
效果:
image.png
image.png

3.上述钩子函数的参数:看文字不清晰,下面用代码加输出结果进行展示
image.png
(1)el:
image.png
结果:
image.png
(2)binding、vnode、oldVnode:
image.png
结果:
image.png

4.练习-----实现v-show:
image.png
隐藏效果如下:
image.png
显示效果如下:
image.png

5.函数式简写:
image.png
代码:
image.png
效果:
image.png

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

版权声明
本文为[Coder_WangYu]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000038637775

Scroll to Top