ホームページ  >  記事  >  ウェブフロントエンド  >  Vue で $refs を使用する方法

Vue で $refs を使用する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-06-02 10:46:381176ブラウズ

今回は、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。