Understand the basic usage of vue $refs

I recently saw the usage of vue $refs on the way to research vue, so today is also a study note!

<div >
  <input type="text" ref="input1"/>
  <button @click="add">Add to</button>
</div>

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs. ="22"; //this.$refs.input1 Reduce the consumption of obtaining dom nodes    }
  }
})
</script>

Generally speaking, to obtain the DOM element, you need to (".input1") to obtain the dom node, and then get the value of input1.

However, after using ref to bind, we don’t need to get the dom node, we can directly bind input1 on 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 above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.