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

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

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

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

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

3.上述钩子函数的参数:看文字不清晰,下面用代码加输出结果进行展示
image.png
(1)el:
怎么使用、为什么要使用Vue的自定义指令?_第10张图片
结果:
怎么使用、为什么要使用Vue的自定义指令?_第11张图片
(2)binding、vnode、oldVnode:
怎么使用、为什么要使用Vue的自定义指令?_第12张图片
结果:
怎么使用、为什么要使用Vue的自定义指令?_第13张图片

4.练习-----实现v-show:
image.png
隐藏效果如下:
怎么使用、为什么要使用Vue的自定义指令?_第14张图片
显示效果如下:
怎么使用、为什么要使用Vue的自定义指令?_第15张图片

5.函数式简写:
image.png
代码:
怎么使用、为什么要使用Vue的自定义指令?_第16张图片
效果:
怎么使用、为什么要使用Vue的自定义指令?_第17张图片

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

你可能感兴趣的:(怎么使用、为什么要使用Vue的自定义指令?)