编程知识 cdmana.com

How and why to use Vue's custom instructions?

1. What is a custom instruction :
image.png
After reading this passage , Still in the clouds ... Look at code :
image.png
Look at the effect :
image.png
At the same time, use global custom commands :
image.png
effect :
image.png
It still works , And don't report mistakes , So what's the priority ?
image.png
effect :
image.png
obviously , A local custom directive with the same name will override a global custom directive with the same name .

2. Hook for custom instructions : You can contrast Vue To understand the life cycle of
image.png
(1)bind: At this time DOM The element is not mounted on the page
image.png
Observations , Find out focus() Methods don't work :
image.png
(2)inserted: In fact, it has been inserted into the document , The example is above

(3)update: It can be understood that only when the binding value changes
image.png
effect :
image.png
(4)componentUpdated: As the name suggests , stay update After performing

(5)unbind:dom After the element is deleted, execute
image.png
effect :
image.png
image.png

3. The parameters of the hook function above : I can't read the text clearly , The following is the code and output to show
image.png
(1)el:
image.png
result :
image.png
(2)binding、vnode、oldVnode:
image.png
result :
image.png

4. practice ----- Realization v-show:
image.png
The hidden effect is as follows :
image.png
The display effect is as follows :
image.png

5. Short for function :
image.png
Code :
image.png
effect :
image.png

6. summary : It's like v-show It's the same little exercise as , We can also use custom instructions to simulate v-bind、v-model Waiting for a lot of instructions , Besides simulation , We can also write our own instructions . Thinking is the most important thing to write code , And ideas will grow with experience . That's the joy of writing code . Continue to work hard to write beautiful code !

版权声明
本文为[Coder_ WangYu]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224173237795A.html

Scroll to Top