Detailed explanation of the use of $refs in vue

This time I will bring you a detailed explanation of the use of $refs in vue. What are the precautions for using $refs in vue. The following is a practical case, let's take a look.

But after binding with ref, we no longer need to obtain the dom node. We can directly bind input1 to the above input and then call it in $refs.

Then call this in javascript: this.$refs.input1 This can reduce the consumption of obtaining dom nodes

The usage is as follows:

HTML:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>

JS:

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

The following will introduce the basic usage of vue $refs. The specific code is as follows:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>
<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

General To get the DOM element, you need <a href="//m.sbmmt.com/code/658.html" target="_blank">document</a>.querySelector(".input1")Get the dom node, and then get the value of input1.

But after binding with ref, we no longer need to obtain the dom node. We can directly bind input1 to the above input and then call it in $refs.

Then call it like this in javascript: this.$refs.input1 This can reduce the consumption of obtaining dom nodes

I believe you have mastered the method after reading the case in this article, please come for more exciting information Pay attention to other related articles on php Chinese website!

Recommended reading:

Vue webpack asynchronous loading method summary

vue router separates all sub-routes into independent components

The above is the detailed content of Detailed explanation of the use of $refs in vue. For more information, please follow other related articles on the PHP Chinese website!