vue에서 $refs를 사용하는 방법

이번에는 vue에서 $refs를 사용하는 방법과 vue에서 $refs를 사용할 때 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

일반적으로 DOM 요소를 얻으려면 <a href="http://www.php.cn/code/658.html" target="_blank">document<code><a href="http://www.php.cn/code/658.html" target="_blank">document</a>.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

用法如下:

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>

下面给大家介绍下vue $refs的基本用法，具体代码如下所示：

<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>

一般来讲，获取DOM元素，需document.querySelector（".input1"）.querySelector (".input1 " )이 dom 노드

를 가져온 다음 input1의 값을 가져옵니다.

하지만 ref로 바인딩한 후에는 더 이상 dom 노드를 얻을 필요가 없습니다. input1을 위의 입력에 직접 바인딩한 다음 $refs에서 호출할 수 있습니다.

그런 다음 javascript

에서 다음을 호출하세요. this.$refs.input1 dom 노드 획득 소모를 줄일 수 있습니다

사용법은 다음과 같습니다.

HTML:rrreeeJS:
rrreee

다음은 vue $refs의 기본 사용법을 소개합니다.

rrreee일반적으로 DOM 요소를 얻으려면 document.querySelector(".input1")하여 DOM 노드를 얻은 다음 input1의 값을 가져와야 합니다.
하지만 ref로 바인딩한 후에는 더 이상 dom 노드를 얻을 필요가 없습니다. input1을 위의 입력에 직접 바인딩한 다음 $refs에서 호출할 수 있습니다.

🎜이것을 javascript로 호출하세요: this.$refs.input1 이렇게 하면 dom 노드를 얻는 데 드는 비용이 줄어듭니다🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다! 🎜🎜추천 자료: 🎜🎜🎜Vue를 사용하여 SMS 확인 성능을 최적화하는 방법🎜🎜🎜🎜🎜Vue 프로젝트에서 vue-i18n 및 element-ui 국제 개발을 구현하는 방법🎜🎜🎜

위 내용은 vue에서 $refs를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!