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

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

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

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

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 オブジェクトを取得できます。

2. 参照参照を使用する

イベント バインディングに加えて、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 サイトの他の関連記事を参照してください。