Project scene:
Originally, the original js was used to directly modify the dom to change the style. Today, I learned from the information that in the process of using vue, try to avoid using native js, because the direct manipulation of dom by native js will cause too much overhead. You should use the vue in $refs manipulates the virtual dom to change the style. Not much nonsense, directly on the issue.
Problem Description:
The above mentioned using $refs to operate the virtual dom (here to remind, the attribute value following refs is the value in the ref attribute in the label), but how to operate it? What is api? Without a clue, the blogger went to program for Baidu. As a result, the situation was very unsatisfactory. Everyone's answers were varied, and there was no unified solution to the problem. Here are simple examples of bloggers and methods from Baidu on the Internet and their errors.
Take a simple view label example (this is not a WeChat development tool, it is HBuilderX, an artifact that solves the proliferation of multiple terminals, and its grammatical structure is WeChat applet and Vue), the purpose is to click to get the height of the label and change its height.
This is a method allegedly obtained by Baidu on the Internet to obtain this.$refs,button,style.height. After
clicking the tag element, the front-end error page display is as follows:
It means that the height attribute under the tag cannot be found, and there is more than one similar answer on the Internet. As for the errors of other answers, I will not list them one by one. The following mainly talks about how to solve this problem.
Cause Analysis:
Just analyzed that there is no such height attribute under the label, then how to get and modify the height of the label? Since there is no answer on the Internet, we will analyze the return value of the tag to see how to obtain and modify the height.
Here print out all the attributes of the view tag obtained with $refs.
console.log(this.$refs.button)
You can see that the attributes inside are as follows: the
blogger has read all the attributes again, here to save time, just click on $el to take a look:
Here you can see that the height of the view label is found, that is, the clientHeight property under $el, so if we want to modify the height, can we directly modify this value? I tried it here:
this.$refs.button.$el.clientHeight="40px"
I found the following error: It
means that the attribute is only readable and cannot be rewritten. What should I do? Isn't it possible to modify the height of the label through js? Of course, it can be modified. Vue can be so popular and naturally has these basic functions. Here we continue to observe and we can find that there is another attribute called style under $el, which is just in line with the word of the style. Would it be to modify it? What? Here I tried it:
this.$refs.button.$el.style.height="40px"
As you can see, after clicking the label, that is to say, before executing the code, the cssText in the style under $el is an empty character.
After clicking, it is found that the cssText is:
that is, the height we just modified is written into cssText, modify success.
solution:
Finally, here is a summary:
For obtaining the height attribute of the label:
this.$refs.button.$el.clientHeight
Modify the height attribute of the label:
this.$refs.button.$el.style.height="40px"
Of course, specific analysis of specific issues, for example, if you want to modify the id or className now, you need to find the attribute value and modification method again.
In addition to providing solutions to this type of problem, this article also provides a spirit of exploring the problem. Where there is a mistake, go deep inside to find the cause of the error.