1. HTML DOM querySelector() method
According to the previous jq method, the CSS selector is used to obtain element tags [execute in the mounted method]
What is obtained is the first element of the selected element;
Get all selected elements;
eg：("#demo");
(".demo");
("p");
("a, p")
("");
("a[target]");
2. Vue's ref and $refs methods
Ref is written in html, equivalent to the index of the tag. $refs is a collection of all registered refs, and then find the corresponding ref through $refs and then perform operations.
ref is on the dom tag, then $refs is the dom tag; ref is on the component, then $refs is a child component instance;
When the same ref is obtained, the problem is that which ref priority is also more important:
1. There are the same refs at the same level, and finally the following elements are obtained through $refs (after>front);
2. Nested the labels at the hierarchy (father-son relationship), and finally obtain the father element (father>son) through $refs;
How to use: The following examples are given:
a. Simply obtain the elements of the current component
Hello
Use this.$ in js to get the p tag
Equivalent to: ('demo'), but $refs will reduce the consumption of getting dom nodes
b. When the ref of the acquired element is a variable
Hello
Use this.$refs[] in js to get the p tag
c. Method for parent component to obtain child component
Subcomponents
name:"child",
methods: {
childClick(e) {
(e)
}
}
}
Parent component
Click
//Use component tags
export default{
name:"parent",
components: {
Child//Sign components as tags
},
methods: {
parentClick() {this.$("I am the method inside the child component"); //Calling the child component's method childClick
}
}
}
Since it is to use dom and operate dom, it is best not to use it in templates or computed!
Here is a beautiful dividing line