$refs를 사용하는 방법

이번에는 $refs 사용법과 $refs 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

일반적으로 DOM 요소를 얻으려면 document.querySelector(".input1")하여 DOM 노드를 얻은 다음 input1의 값을 얻어야 합니다. document.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"）

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

그런 다음 자바스크립트에서 이것을 호출합니다: this.$refs.input1 이렇게 하면 dom 노드를 얻는 데 드는 소비를 줄일 수 있습니다.

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

HTML:

rrreee

JS:rrreee아래 vue $refs의 기본 사용법을 소개하겠습니다. 구체적인 코드는 다음과 같습니다.
rrreee

일반적으로 DOM 요소를 얻으려면 document.querySelector(".input1")가 필요합니다. 그런 다음 이 dom 노드를 얻으십시오. input1의 값을 얻으십시오.

하지만 ref로 바인딩한 후에는 더 이상 dom 노드를 얻을 필요가 없습니다. input1을 위의 입력에 직접 바인딩한 다음 $refs에서 호출할 수 있습니다.
이것을 javascript로 호출하세요: this.$refs.input1 이렇게 하면 dom 노드를 얻는 데 드는 비용이 줄어듭니다

🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다! 🎜🎜추천 자료: 🎜🎜🎜렌더링할 수 없는 하위 구성 요소에 대한 상위 구성 요소 메서드 업데이트 처리🎜🎜🎜🎜🎜vuex를 사용하여 상태 객체를 작동하는 방법🎜🎜🎜

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