乐趣区

关于前端:怎么使用为什么要使用Vue的自定义指令

1. 什么是自定义指令:

看完这段话,依然是云里雾里。。。来看代码:

看看成果:

同时应用全局自定义指令:

成果:

依然好使,并且不报错,那么优先级又是怎么的呢?

成果:

显然,同名的部分自定义指令会笼罩同名的全局自定义指令。

2. 自定义指令的钩子:能够比照 Vue 的生命周期进行了解

(1)bind:此时的 DOM 元素并没有挂载到页面上

察看后果,发现 focus()办法并不会失效:

(2)inserted:其实此时曾经插入文档中了,例子在下面

(3)update:能够了解为仅当绑定的值产生扭转时才执行

成果:

(4)componentUpdated:顾名思义吧,在 update 之后执行

(5)unbind:dom 元素被删除之后执行

成果:

3. 上述钩子函数的参数:看文字不清晰,上面用代码加输入后果进行展现

(1)el:

后果:

(2)binding、vnode、oldVnode:

后果:

4. 练习 —– 实现 v -show:

暗藏成果如下:

显示成果如下:

5. 函数式简写:

代码:

成果:

6. 总结:就像 v -show 的小练习一样,咱们同样能够应用自定义指令去模仿 v -bind、v-model 等很多很多指令,除了模仿之外,咱们还能够编写一些本人的指令。写代码贵在想法,而想法也会随着教训的晋升而变得越来越多。这就是编写代码的乐趣所在。持续为了写出丑陋的代码而致力!

退出移动版