【Vue】单击click事件综合示例和防冒泡方法
2023-09-11 14:14:57 时间
Vue中的事件修饰符:
1、prevent:阻止默认事件(就是不跳转超链接)
2、stop:阻止事件冒泡
3、once:事件只触发一次
4、capture:使用事件的捕获模式
5、self:只有event.target是当前操作的元素是才触发事件。
6、passive:事件的默认行为立即执行,无需等事件回调执行完毕(异步)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Hello World</title>
<script src="vue.js"></script>
</head>
<style>
#app {
background-color: antiquewhite;
width: 200px;
height: 150px;
padding-top: 20px;
padding-left: 10px;
}
</style>
<body>
<div id="app" v-on:click="divClick">
<a href="http://www.baidu.com" @click.stop.passive="hello">
<!--
阻止默认事件(就是不跳转超链接)prevent
<a href="http://www.baidu.com" @click.prevent="hello">
阻止事件冒泡
<a href="http://www.baidu.com" @click.stop="hello">
事件只触发一次
<a href="http://www.baidu.com" @click.once="hello">
使用事件的捕获模式
<a href="http://www.baidu.com" @click.capture="hello">
只有event.target是当前操作的元素是才触发事件
<a href="http://www.baidu.com" @click.self="hello">
事件的默认行为立即执行,无需等事件回调执行完毕
<a href="http://www.baidu.com" @click.passive="hello">
-->
<h3>{{city}}欢迎你</h3>
</a>
<button @click.stop="getCity">显示城市</button>
<button v-on:click="getName($event,'石家庄')">显示省会</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 不显示Vue在启动时的提示
/*
Vue中的事件修饰符:
1、prevent:阻止默认事件(就是不跳转超链接)
2、stop:阻止事件冒泡
3、once:事件只触发一次
4、capture:使用事件的捕获模式
5、self:只有event.target是当前操作的元素是才触发事件。
6、passive:事件的默认行为立即执行,无需等事件回调执行完毕(异步)
*/
var app = new Vue({
el: "#app",
data: {
city: "邯郸"
},
methods: {
hello() {
alert(app.city + "欢迎你!");
},
getCity() {
alert('ok');
},
getName(event, a) {
alert('河北的省会是:' + a);
},
divClick() {
alert("我是DIV");
}
}
})
</script>
</html>
相关文章
- vue中created,mounted,methods,watch,computed各方法解释
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【Vue】通过自定义组件事件绑定,让【父组件】获取【子组件】的值(emit方式,图文+代码示例)
- 【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法(持续更新中...)
- Vue - 完美解决小数的四则运算(加减乘除)导致精度丢失问题,提供详细计算示例代码vue数据计算丢失精度
- [转]Vue CLI 3搭建vue+vuex 最全分析
- Vue全局事件任意组件间通信
- vue-devtools 获取到 vuex store 和 Vue 实例的?
- vue 全局变量
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- vue 组件 子向父亲通信用自定义方法用事件监听
- vue从入门到进阶:简介(一)
- vue组件---自定义事件
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- vue文档摘录九:Vue Router
- Vue页面加载时,触发相关函数,使用了mounted/methods
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
- 前端技术:vue(Vue项目中-axios设置默认请求地址和请求头)
- vscode快速生成vue代码---创建Vue代码模板
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Vue学习第16天——全局事件总线$bus的理解
- vue element 校验输入数字
- vue treeselect 禁止选择某些节点