Detaillierte Erklärung der Verwendung von $refs in Vue

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von $refs in vue geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von $refs in vue?

Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht abrufen. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.

Dann nennen Sie es in Javascript: this.$refs.input1 Dies kann den Verbrauch beim Abrufen von Dom-Knoten reduzieren.

wird wie folgt verwendet:

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>

Lassen Sie mich Ihnen die grundlegende Verwendung von vue $refs vorstellen. Der spezifische Code lautet wie folgt:

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

Im Allgemeinen zu bekommen DOM-Elemente benötigen Siedocument<a href="http://www.php.cn/code/658.html" target="_blank">document</a>.querySelector（".input1"）.querySelector(".input1") Code> Holen Sie sich diesen Dom-Knoten und holen Sie sich dann den Wert von Eingabe1.

Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht mehr erhalten. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.

Dann nennen Sie es in Javascript so: this.$refs.input1 Dies kann den Verbrauch beim Abrufen von Dom-Knoten reduzieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte kommen Sie für weitere spannende Informationen. Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung der asynchronen Lademethode von Vue+Webpack

Vue-Router trennt alle Unterrouten in unabhängige Komponenten

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Verwendung von $refs in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!