vue的一些事件实例教程
vue的事件：
vue事件简写：
vue中事件是 v-on:click=' show()' 但是我嫌弃它写太长每次都要 v-on: 事件
vue中就有事件简写 @click='show()' 这会不会就好点了呢！
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<button v-on:click='show()'>按钮1</button><button @click='show()'>按钮2</button> //这俩种方法都可以执行点击的事件，当然所有事件都可以这样简写。
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#box',
data:{},
methods:{
show:function(){
alert(1)
}
}
});
</script>
</body>
</html>
vue的事件对象：
vue中当然也有事件对象了 ， 这样@click='show($event)' 在时间函数中传$evevt 函数中接收一下，事件对象就有了。
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<button @click='show($event)'>按钮1</button>//传输事件对象
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#box',
data:{},
methods:{
show:function(ev){ //接收事件对象
alert(ev.clientX)； //这个相信都知道
}
}
});
</script>
</body>
</html>
vue的事件冒泡：（大家在原生中都知道事件冒泡，当然不需要这样的时候需要阻止）。
方法一： @click='show($event)' 我们有了事件对象后，我们函数中是不是就可以利用原生中的 ev.cancelBubble=true；
方法二： @click.stop='show()' 只要在事件后面加 .stop 就可以阻止事件冒泡
vue的阻止默认事件：（元素中都有一些大家不喜欢的事件或不需要的方法）
方法一： @click='show($event)' 我们有了事件对象后，我们函数中是不是就可以利用原生中的 ev.preventDefault();
方法二： @click.prevent='show()' 只要在事件后面加 .prevent 就可以阻止默认事件。
vue的键盘事件:
@keydown='show()' 当然我们传个$event 也可以在函数中获 ev.keyCode
我要说的是键盘事件中常用键.
@keydown.enter='show()' 回车执行
@keydown.up='show()' 上键执行
@keydown.down='show()' 下键执行
@keydown.left='show()' 左键执行
@keydown.right='show()' 右键执行
以及....................
Atas ialah kandungan terperinci vue的一些事件实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
![ID Peristiwa 4660: Objek dipadamkan [Betulkan]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
ID Peristiwa 4660: Objek dipadamkan [Betulkan]
Jul 03, 2023 am 08:13 AM
Sesetengah pembaca kami menemui ID4660 acara. Mereka sering tidak pasti apa yang perlu dilakukan, jadi kami menerangkannya dalam panduan ini. ID Peristiwa 4660 biasanya dilog apabila objek dipadamkan, jadi kami juga akan meneroka beberapa cara praktikal untuk membetulkannya pada komputer anda. Apakah acara ID4660? ID Peristiwa 4660 berkaitan dengan objek dalam Direktori Aktif dan akan dicetuskan oleh mana-mana faktor berikut: Pemadaman Objek – Peristiwa keselamatan dengan ID Peristiwa 4660 direkodkan apabila objek dipadamkan daripada Direktori Aktif. Perubahan manual – ID Peristiwa 4660 mungkin dijana apabila pengguna atau pentadbir menukar kebenaran objek secara manual. Ini boleh berlaku apabila menukar tetapan kebenaran, mengubah suai tahap akses atau menambah atau mengalih keluar orang atau kumpulan
Dapatkan acara kalendar akan datang pada skrin kunci iPhone anda
Dec 01, 2023 pm 02:21 PM
Pada iPhone yang menjalankan iOS 16 atau lebih baru, anda boleh memaparkan acara kalendar akan datang terus pada skrin kunci. Baca terus untuk mengetahui cara ia dilakukan. Terima kasih kepada komplikasi muka jam tangan, ramai pengguna Apple Watch sudah terbiasa melihat pergelangan tangan mereka untuk melihat acara kalendar yang akan datang. Dengan kemunculan iOS16 dan widget skrin kunci, anda boleh melihat maklumat acara kalendar yang sama terus pada iPhone anda tanpa membuka kunci peranti. Widget Skrin Kunci Kalendar datang dalam dua perisa, membolehkan anda menjejaki masa acara akan datang yang seterusnya, atau menggunakan widget yang lebih besar yang memaparkan nama acara dan masanya. Untuk mula menambah widget, buka kunci iPhone anda menggunakan Face ID atau Touch ID, tekan dan tahan
Dalam JavaScript, apakah tujuan acara 'oninput'?
Aug 26, 2023 pm 03:17 PM
Apabila nilai ditambah pada kotak input, peristiwa oninput berlaku. Anda boleh cuba menjalankan kod berikut untuk memahami cara melaksanakan acara oninput dalam JavaScript - Contoh<!DOCTYPEhtml><html> <body> <p>Tulis di bawah:</p> <inputtype="text"
Bagaimana untuk melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP?
Nov 02, 2023 pm 12:48 PM
Bagaimana untuk melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP? Fungsi kalendar dan peringatan acara adalah salah satu keperluan biasa semasa membangunkan aplikasi web. Sama ada pengurusan jadual peribadi, kerjasama pasukan atau penjadualan acara dalam talian, fungsi kalendar boleh menyediakan pengurusan masa dan pengaturan transaksi yang mudah. Melaksanakan fungsi kalendar dan peringatan acara dalam projek PHP boleh diselesaikan melalui langkah berikut. Reka bentuk pangkalan data Pertama, anda perlu mereka bentuk jadual pangkalan data untuk menyimpan maklumat tentang acara kalendar. Reka bentuk ringkas boleh mengandungi medan berikut: id: unik untuk acara tersebut
Bagaimana untuk melaksanakan pengikatan peristiwa perubahan bagi elemen terpilih dalam jQuery
Feb 23, 2024 pm 01:12 PM
jQuery ialah perpustakaan JavaScript popular yang boleh digunakan untuk memudahkan manipulasi DOM, pengendalian acara, kesan animasi, dll. Dalam pembangunan web, kami sering menghadapi situasi di mana kami perlu menukar pengikatan acara pada elemen terpilih. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengikat acara perubahan elemen terpilih, dan memberikan contoh kod khusus. Pertama, kita perlu mencipta menu lungsur dengan pilihan menggunakan label:
Apakah peristiwa yang biasa digunakan dalam jquery
Jan 03, 2023 pm 06:13 PM
Peristiwa yang biasa digunakan dalam jquery ialah: 1. Peristiwa tetingkap; 2. Peristiwa tetikus, yang merupakan peristiwa yang dijana apabila pengguna menggerakkan atau mengklik tetikus pada dokumen, termasuk klik tetikus, peristiwa pindah masuk, peristiwa pindah keluar, dsb.; 3. Acara papan kekunci, Peristiwa dijana setiap kali pengguna menekan atau melepaskan kekunci pada papan kekunci, termasuk peristiwa penekan kekunci, peristiwa pelepasan kekunci, dsb. peristiwa akan dicetuskan, dan apabila ia kehilangan fokus, peristiwa blur() dicetuskan dan peristiwa submit() dicetuskan apabila borang diserahkan.
Bagaimana untuk membina aplikasi berasaskan acara menggunakan PHP
May 04, 2024 pm 02:24 PM
Kaedah untuk membina aplikasi berasaskan acara dalam PHP termasuk menggunakan EventSourceAPI untuk mencipta sumber acara dan menggunakan objek EventSource untuk mendengar acara di sisi pelanggan. Hantar acara menggunakan Peristiwa Dihantar Pelayan (SSE) dan dengar acara pada sisi klien menggunakan objek XMLHttpRequest. Contoh praktikal ialah menggunakan EventSource untuk mengemas kini kiraan inventori dalam masa nyata dalam tapak web e-dagang Ini dicapai pada bahagian pelayan dengan menukar inventori dan menghantar kemas kini secara rawak, dan pelanggan mendengar kemas kini inventori melalui EventSource dan memaparkannya dalam. masa sebenar.
Menyelam Dalam Acara Butang Tutup dalam jQuery
Feb 24, 2024 pm 05:09 PM
Pemahaman mendalam tentang peristiwa butang tutup dalam jQuery Semasa proses pembangunan bahagian hadapan, kita sering menghadapi situasi di mana kita perlu melaksanakan fungsi butang tutup, seperti menutup tetingkap pop timbul, menutup kotak gesaan, dsb. Apabila menggunakan jQuery, perpustakaan JavaScript yang popular, ia menjadi sangat mudah dan mudah untuk melaksanakan acara butang tutup. Artikel ini akan menyelidiki cara menggunakan jQuery untuk melaksanakan acara butang tutup, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menguasai teknologi ini dengan lebih baik. Pertama, kita perlu memahami bagaimana untuk menentukan
