Bagaimana untuk mendapatkan objek klik dom dalam vue

Vue.js ialah rangka kerja JavaScript popular yang menyediakan banyak ciri berkuasa yang menjadikan pembangunan aplikasi web lebih mudah dan lebih cekap. Salah satu ciri penting ialah keupayaan untuk mendapatkan objek DOM yang diklik, mari kita lihat dengan lebih mendalam ciri ini.

Untuk pembangun Vue.js, mendapatkan objek DOM yang diklik ialah tugas yang sangat penting. Kerana dalam aplikasi web, kita selalunya perlu mengetahui elemen DOM yang pengguna klik supaya kita boleh bertindak balas dengan sewajarnya kepada elemen ini. Vue.js menyediakan beberapa kaedah untuk mendapatkan objek DOM yang diklik Kami akan menerangkannya satu per satu seperti berikut.

1. Menggunakan pengikatan acara

Vue.js menyediakan pengikatan acara @click yang boleh digunakan untuk mengikat acara klik pada elemen. Dalam pengendali acara, kita boleh mengakses objek acara dan mendapatkan elemen sasaran (iaitu elemen yang diklik) daripada objek acara.

Sebagai contoh, jika kita ingin mendapatkan objek DOM sesuatu butang apabila pengguna mengkliknya, kita boleh menulis seperti ini:

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

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

Dalam contoh di atas, kami menambah A klik acara terikat. Apabila pengguna mengklik butang, kaedah handleClick akan dipanggil dan objek event akan dihantar ke kaedah sebagai parameter. Dalam kaedah handleClick, kita boleh mendapatkan objek DOM pada butang yang diklik dengan mengakses atribut event.target.

2. Gunakan rujukan rujukan

Selain mengikat acara, Vue.js juga menyediakan teg ref yang boleh digunakan untuk merujuk elemen dalam templat. Gunakan teg ref untuk mengakses objek DOM elemen dalam komponen Vue.js.

Andaikan kita mempunyai kotak input dan ingin mendapatkan objek DOM kotak input apabila pengguna memasukkan, kita boleh menulis seperti ini:

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

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

Dalam contoh di atas, kita menggunakan ref Atribut merujuk kotak input dan menamakannya inputName. Dalam kaedah handleInput, kita boleh mengakses objek DOM kotak input melalui this.$refs.inputName. Semua elemen yang dirujuk oleh $refs boleh diakses dalam komponen Vue.js melalui atribut ref.

3. Gunakan arahan tersuai

Selain daripada dua kaedah di atas, Vue.js juga menyediakan arahan tersuai yang boleh digunakan untuk mendapatkan objek DOM yang diklik . Arahan itu boleh didaftarkan secara global atau tempatan dan digunakan seperti berikut:

<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>

Dalam contoh di atas, kami telah menentukan arahan tersuai v-click yang dipanggil apabila elemen diklik Kaedah Mengikat. Dalam kaedah bind arahan, kami menambah pendengar acara klik pada elemen dan memanggil nilai terikat apabila acara dicetuskan. Dalam templat, kami menggunakan arahan v-click untuk mengikat kaedah pada butang dan menghantar elemen yang diklik sebagai parameter kepada kaedah.

Ringkasan

Mendapatkan objek DOM yang diklik ialah tugas biasa dalam pembangunan Vue.js. Artikel ini memperkenalkan beberapa kaedah dalam Vue.js untuk mendapatkan objek DOM yang diklik, iaitu pengikatan peristiwa, menggunakan rujukan ref dan arahan tersuai. Dalam amalan, kita boleh memilih kaedah yang paling sesuai dengan senario semasa mengikut keperluan dan membuat pelarasan yang sesuai mengikut ciri dan batasannya. Saya harap artikel ini boleh membantu pembangun Vue.js.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan objek klik dom dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!