Vue で $refs を使用する方法

今回は、vue で $refs を使用する方法と、vue で $refs を使用する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

一般に、DOM 要素を取得するには、<a href="http://www.php.cn/code/658.html" target="_blank">document<p style="text-align: left;">.querySelector(".input1 " )</p></a>このdom ノード <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"） を取得し、input1 の値を取得します。

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

次に、javascript

でこれを呼び出します: this.$refs.input1 This 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 中国語 Web サイトの他の関連記事を参照してください。