我们可以使用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
相关推荐
m0_7482402542 分钟前
前端如何检测用户登录状态是否过期black^sugar43 分钟前
纯前端实现更新检测寻找沙漠的人1 小时前
前端知识补充—CSSGISer_Jing2 小时前
2025前端面试热门题目——计算机网络篇m0_748245522 小时前
吉利前端、AI面试理想不理想v2 小时前
webpack最基础的配置pubuzhixing2 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界2401_857600952 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道GDAL2 小时前
vue入门教程:组件透传 Attributes