VueでクリックDOMオブジェクトを取得する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

VueでクリックDOMオブジェクトを取得する方法

PHPz

Apr 26, 2023 pm 04:58 PM

Vue.js は、Web アプリケーションの開発をより簡単かつ効率的にする多くの強力な機能を提供する人気のある JavaScript フレームワークです。重要な機能の 1 つは、クリックされた DOM オブジェクトを取得する機能です。この機能について詳しく見てみましょう。

Vue.js 開発者にとって、クリックされた DOM オブジェクトを取得することは非常に重要なタスクです。 Web アプリケーションでは、多くの場合、この要素に適切に応答できるように、ユーザーがどの DOM 要素をクリックしたかを知る必要があるからです。 Vue.js ではクリックされた DOM オブジェクトを取得するメソッドがいくつか用意されていますので、以下で一つずつ説明していきます。

イベントバインディングの使用

Vue.js は、単一のヒットインシデントをバインドするために使用できる @click イベントバインディングを提供します。イベントハンドラーでは、イベントオブジェクトにアクセスし、イベントオブジェクトからターゲット要素 (つまり、クリックされた要素) を取得できます。

たとえば、ユーザーがボタンをクリックしたときにボタンの DOM オブジェクトを取得したい場合は、次のように記述できます:

<template>
  <button @click="handleClick">点击我</button>
</template>

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

ログイン後にコピー

上の例では、Click イベントバインディングを追加しました。ユーザーがボタンをクリックすると、handleClick メソッドが呼び出され、event オブジェクトがパラメータとしてメソッドに渡されます。 handleClick メソッドでは、event.target プロパティにアクセスすることで、クリックされたボタンの DOM オブジェクトを取得できます。

参照参照を使用する

イベントバインディングに加えて、Vue.js はテンプレート内で参照するために使用できる ref タグも提供します。要素。この要素の DOM オブジェクトには、ref タグを使用して Vue.js コンポーネント内のどこからでもアクセスできます。

入力ボックスがあり、ユーザーが入力したときに入力ボックスの DOM オブジェクトを取得したいとします。

<template>
  <div>
    <label>请输入姓名：</label>
    <input ref="inputName" type="text" @input="handleInput" />
  </div>
</template>

<script>
export default {
  methods: {
    handleInput() {
      console.log(this.$refs.inputName)
    },
  },
}
</script>

ログイン後にコピー

上記の例では、## を使用します。 #ref 属性は入力ボックスを参照し、inputName という名前を付けます。 handleInput メソッドでは、this.$refs.inputName を通じて入力ボックスの DOM オブジェクトにアクセスできます。 ref によって参照されるすべての要素は、$refs 属性を介して Vue.js コンポーネントでアクセスできます。

上記の 2 つのメソッドに加えて、Vue.js は、クリックされた DOM オブジェクトを取得するために使用できるカスタム命令も提供します。このディレクティブはグローバルまたはローカルに登録でき、次のように使用できます。

<template>
  <button v-click="handleClick">点击我</button>
</template>

<script>
Vue.directive('click', {
  bind(el, binding, vnode) {
    el.addEventListener('click', () => {
      binding.value(el)
    })
  },
})

export default {
  methods: {
    handleClick(el) {
      console.log(el)
    },
  },
}
</script>

ログイン後にコピー

上記の例では、要素が境界されている場合に使用されるカスタムディレクティブ

v-click を定義しました。クリックされるとメソッドが呼び出されます。ディレクティブの bind メソッドでは、クリックイベントリスナーを要素に追加し、イベントが発生したときにバインドされた値を呼び出します。テンプレートでは、v-click ディレクティブを使用してメソッドをボタンにバインドし、クリックされた要素をパラメーターとしてメソッドに渡します。

概要

クリックされた DOM オブジェクトを取得することは、Vue.js 開発における一般的なタスクです。この記事では、#ref

参照とカスタム命令を使用して、クリックされた DOM オブジェクト、つまりイベントバインディングを取得するための Vue.js のいくつかのメソッドを紹介します。実際には、必要に応じて現在のシナリオに最も適した方法を選択し、その特性と制限に従って適切な調整を行うことができます。この記事が Vue.js 開発者に役立つことを願っています。

以上がVueでクリックDOMオブジェクトを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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