To read more quality articles pleaseJabber at the GitHub blog, a hundred quality articles a year waiting for you!
Details a
Based on example
Running results:
So we all know that, so I’m not going to go into this, but in code, sometimes we need to have a tBody where each line is a child component, so how do we code that? We can write this to define a global component as follows:
Then inside the body we can call:
Running results:
You can see that row is printed, but it actually has no task content in it, so what’s our problem? Going back to the code, we found that we did not specify the point to mount the vue instance, so we specify the Dom to be taken over by the Vue via el, as follows:
Running results:
It doesn’t feel wrong, but is it? We look at the DOM structure by examining the element:
Can you see the error? The normal three tr’s are inside the Tbody, but now they are on the same level as the Tbody.
In the H5 specification, we are required to have tbody in table, and tbody must have tr in it. Now we are using row in child components, so our browser will have problems parsing.
So how do we solve the bug once we get to this situation? We can solve this problem with the is attribute provided by vUE. It’s easy, we can only put TR inside tbody, so we can all put TR, but actually we want to display TR not just the empty contents of tr, we need to display the contents of the row component, so how do we do that?
We can add an attribute is to tr equal to row like this:
I’m going to use a component, but I can’t write it directly, so we’ll write a TR, and we’ll call it is. I’m going to write tr, but it’s going to be a row component, so that we can both conform to the H5 specification and display the contents of our component, and the program won’t be buggy.
Running results:
Everything is normal.
We can do the same thing with ul and select tags.
Details of the second
Based on example
We define a component row that contains text. If we wanted to extract the text as a variable, you would probably write:
It seems perfect, but when you open your browser and run it, you’ll find a bug beckoning:
Data is a function, not an object. In the root component, which is the outermost instance of vUE, we are ok with object definition, but in the non-root component child definition is not ok. The data definition requires a function that returns an object as follows:
Running results:
That solves the problem.
Is defined, the reason is a child component, unlike the root component is invoked only once, but can be called multiple times, then each child component data we don't want to and other subcomponents conflict or each component should have its own data fields, through the function returns an object can be achieved the requirements.
Details of the three
Based on example
Run, click pop up click, nothing wrong. Vue does not recommend manipulating the Dom in code, but we do need to manipulate the Dom for extremely complex animation effects. So how do we manipulate the Dom in VUE? We can refer to it by ref as follows:
We need to print out the contents of the div when we click on it. We can get the div node by reference and print out the contents of the div:
Running results:
May you become a lifelong learner