Shulou(Shulou.com)06/02 Report--

This article is mainly about "how to get dom in vuejs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to get dom in vuejs.

Vuejs method to obtain dom: 1, in the DOM part of the component, write "ref=" xxx "" in any tag; 2, get the element through the component object "this.$refs.xxx".

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue.js instance Learning: getting DOM elements

1. Get DOM element

To get the DOM element in Vue, we can use ref.

Usage (same as React):

(1) in the DOM section of the component, write: ref= "xxx" in any label

(2) obtain the element through the component object this.$refs.xxx

1. DOM example 1: let App = {template: `I am the button, beforeCreate () {/ / data console.log ('beforeCreate:', this.$refs.btn) cannot be operated here;}, created () {/ / data console.log ('created:', this.$refs.btn) can be manipulated here }, beforeMount () {/ / new Vue is loaded, before replacing console.log ('beforeMount:', this.$refs.btn);}, mounted () {/ / console.log ('mounted:', this.$refs.btn) after data;},},} New Vue ({el:'# app', components: {app: App}, template: ``,})

Console output:

Description: this.$refs.btn can only be obtained when mounted ()

2. DOM example 2: let Temp = {template: `I am a child component`,}; let App = {components: {temp: Temp,}, template: ``, mounted () {console.log (this.$refs.tmp);},} Let vm = new Vue ({el:'# app', components: {app: App}, template: ``,})

Console output:

What we see in the console output is the temp component.

Here we will focus on the various properties of the component (eg: $el, $parent, etc.)

If we change console.log (this.$refs.tmp) to:

Console.log (this.$refs.tmp.$el)

The console will output the following picture, so you can see what $el stands for.

Summary:

$parent: gets the parent component of the current component

$children: subcomponents of

$root: get the instance of new Vue (that is, above: vm)

$el: gets the DOM element of the current component

2. Add an event to the DOM element in a special case:

Requirement: get the focus of the input when the input element is displayed

Let App = {template: ``, data () {return {isShow: false,};}, mounted () {this.isShow = true; / / display input element this.$refs.myInput.focus (); / / get the focus of input},} Let vm = new Vue ({el:'# app', components: {app: App}, template: ``,})

Report an error after operation:

The error shows that focus does not exist because this.$refs.myInput is also undefined. Why didn't ref get the DOM element?

Let's think about it first, if we change the mounted function to:

Mounted () {this.isShow = true; this.isShow = false; this.isShow = true;}

During the run, will the input element be displayed, then disappear, and then displayed?

The answer is no. Because Vue will let the code finish before performing the DOM operation based on the final value. In fact, the above code is equivalent to the following code:

Mounted () {this.isShow = true;}

So how to solve it?

Here we use $nextTick to solve ~

Vm.$nextTick

When to use: to do something immediately after Vue renders DOM to the page, use $nextTick

Modified version of this.$nextTick (function () {dosomething}): let App = {template: ``, data () {return {isShow: false,};}, mounted () {/ / display the moment of input element, get focus this.isShow = true; this.$nextTick (function () {this.$refs.myInput.focus ();});},} Let vm = new Vue ({el:'# app', components: {app: App}, template: ``,}). Now that you have a better understanding of "how to get dom in vuejs", you might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.