ref reference
jquery simplifies the process of programmers manipulating DOM
Vue advantage: MVVM In vue, the programmer does not need to manipulate the DOM. Just need to maintain the data! (Data Driven View)
Conclusion: In the vue project, it is strongly not recommended to install and use jQuery! ! !
1. What is ref reference
-
ref is used to assist developers to obtain references of DOM elements or components without relying on jQuery .
-
Each vue component instance contains a $refs object, which stores the reference of the corresponding DOM element or component.
-
By default, a component's $refs point to one
空对象.
The following code is just to get the instance object of the component, to illustrate that $refs points to an empty object by default
Everything starting with $ is a built-in member of vue
2. Use ref to refer to DOM elements
If you want to use ref to refer to a DOM element on the page , you can do it as follows:
3. Use ref to refer to the component instance
If you want to use ref to refer to the component instance on the page , you can do it as follows:
my-counterIn this way, you can call the add() method in the component by getting the component instance
When naming a ref, it is recommended to add Ref at the end to facilitate ref recognition
4. The following is the ref chestnut: control the on-demand switching of text boxes and buttons
Use the Boolean value inputVisible to control the on-demand switching of the text box and button in the component. The sample code is as follows:
5. Let the text box automatically get the focus
After the text box is displayed, if you want it to get the focus immediately, you can add a ref to it and call the .focus() method of the native DOM object . The sample code is as follows:
The following error will be reported:
This error often occurs at the front end, which means that 'focus' is not undefined, but that the one before calling the property or method is undefined
It does not take effect at this time, because when the execution is completed this.inputVisible = true, this.$refs.ipt.focus()the page will be executed and rendered immediately, so this.$refs.ipt is undefined
6. this. $nextTick (cb) method
The component's $nextTick(cb) method will defer the execution of the cb callback until the next DOM update cycle. The popular understanding is: wait until the DOM update of the component is completed, and then execute the cb callback function. This ensures that the cb callback function can operate on the latest DOM element .
The reason for not using the life cycle function updated is that when the input is switched to a button, updated will still be triggered. At this time, there is no input, so no 'ipt' will report an error.