vue에서 $refs 사용에 대한 자세한 설명

이번에는 vue에서 $refs 사용에 대해 자세히 설명하겠습니다. vue에서 $refs 사용 시 주의사항은 무엇인가요?

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

그런 다음 javascript에서 이것을 호출하세요: this.$refs.input1 이렇게 하면 dom 노드를 얻는 데 드는 소비를 줄일 수 있습니다. 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元素，需<a href="http://www.php.cn/code/658.html" target="_blank">document</a>.querySelector（".input1"）

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

HTML:

rrreee

JS:

rrreee

다음은 vue $refs의 기본 사용법을 소개합니다. 구체적인 코드는 다음과 같습니다.

rrreee

일반적으로 DOM 요소를 얻으려면 <a href="http://www.php.%20cn/code%20/658.html" target="_blank">document<p style="text-align: left;">.querySelector(".input1")</p></a> 이 dom 노드를 가져온 다음 input1의 값을 가져옵니다. 하지만 ref로 바인딩한 후에는 더 이상 dom 노드를 얻을 필요가 없습니다. input1을 위의 입력에 직접 바인딩한 다음 $refs에서 호출할 수 있습니다.
이것을 javascript로 호출하세요: this.$refs.input1 이렇게 하면 dom 노드를 얻는 데 드는 비용이 줄어듭니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!
추천 자료:

🎜🎜Vue+webpack 비동기 로딩 방법 요약🎜🎜🎜🎜🎜vue 라우터는 모든 하위 경로를 독립적인 구성 요소로 분리합니다🎜🎜🎜

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