我们可以使用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
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库Savior`L1 小时前
CSS知识复习5许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱秋田君6 小时前
深入理解JavaScript设计模式之命令模式中微子6 小时前
React 状态管理 源码深度解析风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章lichenyang4538 小时前
React移动端开发项目优化