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

.querySelector(".input1") この dom ノードを取得し、input1 の値を取得します。

しかし、ref でバインドした後は、dom ノードを取得する必要はなくなり、input1 を上記の入力に直接バインドして、それを $refs で呼び出すことができます。
次に、JavaScript で this.$refs.input1 を呼び出します。これにより、dom ノードの取得にかかる消費量が減ります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、その他の情報に注意してください。関連記事はPHP中国語サイトにあります！ 推奨読書:

🎜Vue+webpack の非同期読み込み方法の概要🎜🎜🎜🎜🎜vue ルーターはすべてのサブルートを独立したコンポーネントに分離します🎜🎜🎜

以上がvue での $refs の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。