共计 556 个字符,预计需要花费 2 分钟才能阅读完成。
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 等很多很多指令,除了模仿之外,咱们还能够编写一些本人的指令。写代码贵在想法,而想法也会随着教训的晋升而变得越来越多。这就是编写代码的乐趣所在。持续为了写出丑陋的代码而致力!
正文完