How to get dom in vuejs

Vuejs method of obtaining 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". Can.

The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue.js Example Learning: Get DOM Elements

##1. Get DOM Elements

To get DOM elements in Vue, we can use

ref.

Usage (same as React):

(1) In the DOM part of the component, write in any tag:
ref="xxx" (2) Through the component Object
this.$refs.xxx Get the element

1. Get the DOM of the HTML tag

Example 1:

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `
      <div>
        <button ref="btn">我是按钮</button>    
      </div>`,
    beforeCreate() {
      //这里不能操作数据
      console.log(&#39;beforeCreate: &#39;, this.$refs.btn);
    },
    created() {
      //这里可以操作数据了
      console.log(&#39;created: &#39;, this.$refs.btn);
    },
    beforeMount() {
      //new Vue 发生装载， 替换 <div id="app">之前
      console.log(&#39;beforeMount: &#39;, this.$refs.btn);
    },
    mounted() {
      //装在数据之后
      console.log(&#39;mounted: &#39;, this.$refs.btn);
    }, 
  };

  new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

Console output:

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

---

2. Get the DOM of the component

Example 2:

<div id="app"></div>

<script type="text/javascript">
  let Temp = {
    template: `
      <div>我是子组件</div>
    `,
  };
  let App = {
    components: {
      temp: Temp,
    },
    template: `<temp ref="tmp"/>`,
    mounted() {
      console.log(this.$refs.tmp);
    },
  };

  let vm = new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

Console output:

We see that the
of the console output is temp component . What we want to focus on here are 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, from which we can know what $el represents~

Summary:

$parent: Get the current The parent component of the component
$children: The child component of ·················
$root: Get the instance of new Vue (i.e. the above : vm)
$el: Get the DOM element of the current component

---

2. Special cases of adding events to DOM elements

Example:

Requirement: Get the focus of the input at the moment when the input element is displayed

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `
      <div>
        <input type="text" v-if="isShow" ref="myInput" />
      </div>`,
    data() {
      return {
        isShow: false,
      };
    },
    mounted() {
      this.isShow = true;    //显示input元素
      this.$refs.myInput.focus();  //获取input的焦点
    },   
  };

  let vm = new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

Error reported after running:

The error message shows that focus does not exist, the reason is
this. $refs.myInput is also undefined. Why doesn'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 operation process, will the input element be displayed first, then disappear, and then be displayed again?

the answer is negative.
Because Vue will let the code be executed first, and then perform DOM operations 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:

Render DOM in Vue to To do something immediately after the page, use $nextTick

this.$nextTick(function() {
   ·····dosomething
})

---

Modified version:

let App = {
  template: `
    <div>
      <input type="text" v-if="isShow" ref="myInput" />
    </div>`,
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    //显示input元素的瞬间，获取焦点
    this.isShow = true;
    this.$nextTick(function() {
      this.$refs.myInput.focus();  
    });
  },
  
};

let vm = new Vue({
  el: &#39;#app&#39;,
  components: {
    app: App
  },
  template: `<app />`,
});

Recommended learning: "

The latest 5 vue.js video tutorials Featured》

The above is the detailed content of How to get dom in vuejs. For more information, please follow other related articles on the PHP Chinese website!