我们可以使用v-on来监听DOM事件,并在事件触发时执行对应的Vue的Javascript代码。
- 用法:v-on:click = "handler" 或简写为 @click = "handler"
- vue中的事件名=原生事件名去掉 on 前缀 如:onClick --> click
- handler的值可以是方法事件处理器,也可以是内联事件处理器
- 绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
|--------------------------------|
| @click.once:只触发一次事件。[重点] |
| @click.prevent:阻止默认事件。[重点] |
| @click.stop:阻止事件冒泡 |
| @click.capture:使用事件捕获模式而不是冒泡模式 |
| @click.self:只在事件发送者自身触发时才触发事件 |
html<script setup> import {ref} from "vue"; //响应式数据 当发生变化时,会自动更新 dom 树 let count = ref(0); let addCount=()=>{ count.value++; } let incrCount=(event)=>{ count.value++; //通过事件对象阻止组件的默认行为 event.preventDefault(); } let sayHello=()=>{ alert("hello world!") } let h01=()=>{ alert("ho1") } let h02=()=>{ alert("ho2") event.stopPropagation(); //阻止事件传播,繁殖,蔓延 } let h03=()=>{ alert("h03"); } </script> <template> <div> <h1>count的值是:{{count}}</h1> <!--方法事件处理器--> <button v-on:click="addCount()">addCount</button><br> <!--内联事件处理器--> <button @click="count++">incrCount</button><br> <!--事件修饰符 once 只绑定事件一次--> <button @click.once="count++">addOnce</button><br> <!--事件修饰符 prevent 阻止组件的默认行为--> <a href="https://blog.csdn.net/m0_65152767?spm=1011.2124.3001.5343" target="_blank" @click.prevent="count++">prevent</a><br> <!--原是js方式阻止组件默认行为(推荐)--> <a href="https://blog.csdn.net/m0_65152767?spm=1010.2135.3001.5343" target="_blank" @click="incrCount($event)">prevent</a><br> <button v-on:click="sayHello">点我</button> <button @click="sayHello">点我省略v-on:</button> <div @click="h01" style="background-color: #abc;width: 200px;height: 200px"> <div @click="h02" style="background-color: #cba;width: 100px;height: 100px">HELLO</div> <div @click.stop="h03" style="background-color: #dfb;width: 100px;height: 100px">HELLO</div> </div> </div> </template>
Vue3+Vite实现工程化,事件绑定以及修饰符
丁总学Java2023-11-20 11:42
相关推荐
NBtab9 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案天天扭码10 小时前
来全面地review一下Flex布局(面试可用)用户4582031531710 小时前
CSS特异性:如何精准控制样式而不失控?用户516816614584110 小时前
Vue Router 路由懒加载引发的生产页面白屏问题libraG10 小时前
Jenkins打包问题前端康师傅10 小时前
JavaScript 作用域前端缘梦10 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南我是天龙_绍10 小时前
使用 TypeScript (TS) 结合 JSDoc云枫晖11 小时前
JS核心知识-事件循环Simon_He11 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)