Vue で DOM 要素を取得するいくつかの方法について説明します。-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-07 10:05:32

オリジナル

6335 人が閲覧しました

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