Cara menggunakan v-on:click.prevent untuk menghalang tingkah laku lalai dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web dinamik. Set arahannya menyediakan pembangun cara yang mudah dan cekap untuk menulis kod JavaScript bersama HTML.

Arahan v-on digunakan untuk mengikat peristiwa DOM, seperti klik, alih tetikus, turun kekunci dan acara lain. Dalam Vue, kadangkala kita perlu menghalang gelagat lalai unsur DOM, seperti tidak melompat ke halaman selepas mengklik pautan atau menghalang penyerahan borang.

Untuk mengelakkan tingkah laku lalai, Vue mempunyai pengubah suai terbina dalam .prevent untuk arahan v-on.

Apabila menggunakan arahan v-on, kami boleh terus menggunakan "." untuk menambah pengubah suai selepas nama acara, contohnya:

<button v-on:click.prevent="handleClick">不跳转</button>

Seperti yang ditunjukkan dalam coretan kod di atas, kami adalah mengklik pada acara Pengubah suai .prevent digunakan kemudian, yang akan memanggil kaedah preventDefault() objek acara dalam fungsi pengendali acara untuk menghalang tingkah laku lalai.

Malah, pengubah .prevent hanya menambah baris kod yang menghalang gelagat lalai penyebaran acara:

event.preventDefault(); // 阻止默认行为

Selain pengubah .prevent, Vue juga menyediakan pengubahsuaian lain yang biasa digunakan simbol, seperti .stop, .capture, .self, dsb. Kita boleh menggunakan berbilang pengubah suai dalam kombinasi untuk melaksanakan logik pemprosesan peristiwa yang lebih kompleks.

Selain itu, kami juga boleh menggunakan fungsi anak panah ES6 untuk mentakrifkan fungsi pengendalian acara, contohnya:

<button v-on:click.prevent="() => handleClick()">不跳转</button>

Seperti yang ditunjukkan dalam coretan kod di atas, kami menggunakan fungsi anak panah ES6 untuk menentukan fungsi pengendalian acara , yang akan Mengikat penuding ini seperti yang dijangkakan dan masih menggunakan pengubah suai .prevent.

Ringkasnya, melalui arahan .v-on dan pengubah suainya dalam Vue, kami boleh melaksanakan gelagat lalai menyekat elemen DOM dengan mudah. Ini adalah ciri yang sangat mudah bagi rangka kerja Vue, menjadikan kami lebih fleksibel dan cekap semasa menulis aplikasi web.

Atas ialah kandungan terperinci Cara menggunakan v-on:click.prevent untuk menghalang tingkah laku lalai dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!