Vue で DOM 要素を取得するいくつかの方法について説明します。

Vue は、開発者がインタラクティブな Web アプリケーションを簡単に構築できるようにする人気の JavaScript フレームワークです。一般的なニーズの 1 つは、Vue コンポーネントで DOM 要素を取得して操作できるようにすることです。ただし、Vue には DOM 要素を取得する特別な方法がいくつかあります。この記事では、Vue で DOM 要素を取得するいくつかの方法を検討します。

1. $refs を通じて要素を取得する Vue の

#$refs は、コンポーネント内のすべての DOM 要素への参照を提供する特別なオブジェクトです。 Vue コンポーネントでは、ref 属性を使用して要素に名前を付け、$refs オブジェクトを使用して要素にアクセスできます。以下に例を示します。

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="handleClick">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.myInput.value);
    },
  },
};
</script>

上の例では、入力ボックスに ref 属性を追加し、それを myInput に設定しました。 this.$refs.myInput を使用してこの要素にアクセスできます。 handleClick メソッドでは、入力ボックスの値を取得し、それをコンソールに出力します。

2. イベント パラメーター $event を通じて要素を取得する

DOM イベントを処理する場合、Vue コンポーネントは特別なイベント パラメーター $event を提供します。これには、現在のイベントを含むイベントに関するすべての情報が含まれます。イベント 対象の要素 (ターゲット)。

<template>
  <div>
    <input type="text" @blur="handleBlur">
  </div>
</template>

<script>
export default {
  methods: {
    handleBlur(event) {
      console.log(event.target.value);
    },
  },
};
</script>

上の例では、@blur イベント リスナーを追加し、handleBlur メソッドにバインドしました。入力ボックスがフォーカスを失うと、handleBlur メソッドがトリガーされます。このメソッドはイベント パラメーター イベントを受け取り、event.target.value を使用して入力ボックスの値を取得します。

3. サードパーティ ライブラリを使用する

Vue が提供するメソッドに加えて、サードパーティ ライブラリを使用して DOM 要素を取得することもできます。 jQuery は、DOM 要素の取得と操作を容易にする人気の JavaScript ライブラリです。 jQuery を Vue コンポーネントに追加し、jQuery のセレクターを使用して要素にアクセスできます。

<template>
  <div ref="myDiv">
    <p>Hello World!</p>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  mounted() {
    const myDiv = $(this.$refs.myDiv);
    const p = myDiv.find("p");
    console.log(p.text());
  },
};
</script>

上の例では、ref 属性を

要素に追加し、myDiv に設定しました。次に、mounted() フック関数で jQuery セレクターを使用して、要素とその子にアクセスします。最後に、p.text() を使用して

要素内のテキスト コンテンツを取得し、コンソールに出力します。

要約すると、Vue は、単純な $refs から強力な jQuery セレクターまで、DOM 要素を取得するためのさまざまなメソッドを提供します。開発者はアプリケーションに最適な方法を選択できます。

以上がVue で DOM 要素を取得するいくつかの方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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