Cara menggunakan v-on untuk mendengar acara dalam Vue

Vue ialah rangka kerja JavaScript yang popular yang telah menjadi pilihan yang sangat popular bagi kebanyakan pembangun. Ia menggunakan sistem responsif dan komponenisasi untuk membolehkan pembangun membuat aplikasi bahagian hadapan interaktif dengan cepat. Antaranya, arahan v-on adalah alat yang sangat berguna, yang membolehkan pembangun memantau pelbagai acara dengan mudah dalam aplikasi Vue. Artikel ini akan memperkenalkan cara menggunakan v-on untuk mendengar acara dalam Vue.

1. Penggunaan asas v-on

Arahan v-on sebenarnya adalah singkatan untuk mengikat acara, seperti klik, alih tetikus dan papan kekunci seterusnya. Berikut ialah penggunaan asas v-on, mengambil pemantauan peristiwa klik sebagai contoh:

<button v-on:click="handler">Click me</button>

Dalam kod di atas, kami menggunakan arahan v-on untuk mendengar acara klik dan mengikat acara itu kepada pengendali kaedah. Apabila pengguna mengklik butang, kaedah pengendali dicetuskan.

Anda juga boleh menggunakan singkatan berikut:

<button @click="handler">Click me</button>

Ini ialah singkatan arahan v-on, dan kesannya adalah sama seperti kod di atas.

2. Kaedah pemprosesan untuk mendengar acara

Secara amnya, kita perlu menentukan kaedah secara manual dalam contoh Vue untuk mengendalikan acara. Nama kaedah boleh disesuaikan, dan kita boleh menulis fungsi pemprosesan dalam kaedah.

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick: function (event) {
      // 处理点击事件
    }
  }
}
</script>

Dalam kod di atas, kami menentukan kaedah handleClick dalam komponen Vue untuk mengendalikan acara klik. Apabila pengguna mengklik butang, kaedah ini akan dicetuskan dan acara objek acara akan dihantar ke kaedah sebagai satu-satunya parameter. Dalam kaedah tersebut, kita boleh mendapatkan beberapa maklumat tentang peristiwa melalui objek acara.

3. Lulus parameter

Jika kita perlu menghantar parameter tambahan kepada fungsi pemprosesan, kita boleh menggunakan sintaks khas arahan v-on.

<template>
  <button v-on:click="handleClick('参数1', '参数2')">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick: function (arg1, arg2) {
      // 处理点击事件，并使用arg1和arg2
    }
  }
}
</script>

Dalam kod di atas, kami lulus dalam dua parameter dalam arahan, dan kedua-dua parameter ini akan dihantar kepada parameter arg1 dan arg2 dalam fungsi handleClick. Ambil perhatian bahawa jika kita perlu menggunakan parameter dinamik, kita perlu menggunakan sintaks kurungan segi empat sama.

4. Pengubah suai

Selain daripada penggunaan asas dan parameter lulus, arahan v-on juga menyediakan beberapa pengubah untuk meningkatkan keupayaan pemprosesan acara.

4.1 Mencegah peristiwa menggelegak

Dalam Vue, peristiwa boleh menggelembung di sepanjang pepohon komponen sehingga ia mencapai komponen akar. Jika kita perlu menghalang acara daripada menggelegak, kita boleh memanggil kaedah stopPropagation() objek Acara dalam kaedah pemprosesan acara.

<template>
  <div v-on:click="outer">
    <div v-on:click="inner">
      Click me
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    inner: function (event) {
      event.stopPropagation()
    },
    outer: function () {
      console.log('outer')
    }
  }
}
</script>

Dalam kod di atas, kami memanggil kaedah stopPropagation() dalam peristiwa klik subkomponen, dengan itu menghalang acara daripada menggelegak. Jika kita tidak memanggil kaedah ini, acara klik akan mencetuskan fungsi pengendali dalam komponen anak dan komponen induk secara bergilir.

4.2 Cegah kelakuan lalai

Dalam Vue, fungsi pengendali peristiwa juga boleh memanggil kaedah preventDefault() objek Acara untuk menghalang kelakuan lalai penyemak imbas. Sebagai contoh, kita boleh menghalang penyerahan borang atau pengalihan pautan.

<template>
  <form v-on:submit.prevent="submit">
    ...
  </form>
  <a href="https://www.google.com" v-on:click.prevent>Google</a>
</template>

<script>
export default {
  methods: {
    submit: function () {
      // 阻止表单的提交行为
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan pengubah suai mencegah dalam acara penyerahan borang, dengan itu menghalang kelakuan penyerahan lalai borang. Dalam acara klik pautan, kami juga menggunakan pengubah suai mencegah untuk menghalang pautan daripada melompat.

4.3 Pengubah suai utama

Dalam Vue, acara boleh digunakan bersama dengan kunci. Jika kita hanya mahu mencetuskan peristiwa apabila kekunci tertentu ditekan, kita boleh menggunakan pengubah suai kekunci.

<template>
  <input v-on:keyup.enter="submit">
</template>

<script>
export default {
  methods: {
    submit: function () {
      // 处理键盘的回车事件
    }
  }
}
</script>

Dalam kod di atas, kita boleh menggunakan pengubah suai .enter dalam acara keyup supaya pengendali acara hanya dicetuskan apabila kekunci enter ditekan.

Ringkasnya, arahan v-on ialah arahan yang sangat berguna, yang boleh membantu kami memantau pelbagai acara dengan sangat mudah dalam aplikasi Vue. Apabila menggunakan arahan v-on, kita perlu memberi perhatian kepada penggunaan asas, lulus parameter, pengubah, dll., supaya kita boleh menggunakan arahan ini dengan lebih baik.

Atas ialah kandungan terperinci Cara menggunakan v-on untuk mendengar acara dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!