Vue 事件监听
事件监听
v-on
使用v-on进行事件绑定监听，回调函数写在methods中。可以使用@的这种简写形式来代替v-on，当事件源无参数传递时，可省略括号。
语法如下所示：
<button @:事件=回调函数(参数)>点我</button>
下面是一个小的示例：
<body>
<div id="app">
<button @click="func">点我</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
func() {
console.log("点击事件发生了");
}
}
})
</script>
</body>
$event
事件源传入形参$event，则是当前事件对象。
<body>
<div id="app">
<button @click="func($event)">点我</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
func(ev) {
console.log(ev);
}
}
})
</script>
</body>
修饰符
.once
使用.once修饰符后，该事件只会监听一次。当执行完这一次动作后将取消监听。
<div id="app">
<button @click.once="func">点我</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
func() {
console.log("只执行一次");
}
}
})
</script>
</body>
.prevent
使用.prevent修饰符来阻止默认事件的发生：
<body>
<div id="app">
<a href="http://www.google.com/" @click.prevent="func">点我</a>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
func() {
console.log("不执行默认事件");
}
}
})
</script>
</body>
.stop
使用.stop修饰符阻止事件冒泡。
<style>
.f {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.s {
width: 50px;
height: 50px;
background: blue;
text-align: center;
color: white;
}
</style>
<body>
<div id="app">
<section @click="father" class="f">
<!-- 父亲事件不会触发 -->
<article @click.stop="son" class="s"></article>
</section>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {},
methods: {
son() {
console.log("儿子事件触发");
},
father() {
console.log("父亲事件触发")
}
},
});
</script>
</body>
.self
使用.self修饰符，也可以防止冒泡。只有点击到自己时才触发，不会通过冒泡触发。
<style>
.f {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.s {
width: 50px;
height: 50px;
background: blue;
text-align: center;
color: white;
}
</style>
<body>
<div id="app">
<!-- 点儿子时父亲事件不会触发 -->
<section @click.self="father" class="f">
<article @click="son" class="s"></article>
</section>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {},
methods: {
son() {
console.log("儿子事件触发");
},
father() {
console.log("父亲事件触发")
}
},
});
</script>
</body>
.capture
使用.capture，开启事件捕获。当子元素点击事件后，冒泡到父元素时，先执行完父元素监听事件的回调函数，再执行子元素监听事件的回调函数。
正常情况下是先执行子元素回调，再执行父元素回调
<style>
.f {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.s {
width: 50px;
height: 50px;
background: blue;
text-align: center;
color: white;
}
</style>
<body>
<div id="app">
<section @click.capture="father" class="f">
<article @click="son" class="s"></article>
</section>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {},
methods: {
son() {
console.log("儿子事件触发");
},
father() {
console.log("父亲事件触发")
}
},
});
</script>
</body>
键盘修饰符
使用@事件.键位的形式，来监听用户按下的键盘键位。
当按下的键位与监听的键位相同，则执行监听回调函数。
如下示例，使用组合监听。当再输入框内按下ctrl与a键时将触发事件的回调函数。
<body>
<div id="app">
<input type="text" @keyup.ctrl.a="func">
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
},
methods:{
func(){
console.log("执行了");
},
},
});
</script>
</body>
鼠标修饰符
使用@事件.按键的形式，来监听用户按下的鼠标按键。
当按下的按键与监听的键位相同，则执行监听回调函数。
如下所示，当用户在特定区域内按下右键后，阻止默认的右键弹出菜单事件，并执行事件的回调函数。
<body>
<div id="app">
<section @contextmenu.prevent="func" :style={width:"300px",height:"300px",backgroundColor:"red"}>
</section>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
},
methods:{
func(){
console.log("执行了");
},
},
});
</script>
</body>
修饰符连用
修饰符支持连用，如下所示：
<button @click.once.stop=func>点我</button>
意思非常明显，只执行一次，阻止默认事件。
Vue 事件监听的更多相关文章
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- vue事件监听机制
vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发 组件调用时绑定事件 之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...
- vue 事件监听和es6模板语法
es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- Vue学习笔记（二）动态绑定、计算属性和事件监听
目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...
- vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
- vue中监听返回键
问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...
随机推荐
- P6329 【模板】点分树 | 震波
\(\text{Solution}\) 点分树就是将点分治过程中的重心连成一棵虚树 对点分树子树信息的记录,就是点分治处理每个重心时需要的信息 这样就可以留下点分治的过程,支持多次修改和查询 点分树树 ...
- LG P3803 【模板】多项式乘法
\(\text{FFT}\) 模板 #include <cstdio> #include <iostream> #include <cmath> #define r ...
- 三年观察揭示TNF抑制剂持续改善强柱患者躯体功能的预测因子
标签:强直性脊柱炎; TNF抑制剂; 躯体功能; 预测因子 一项为期3年的观察研究揭示TNF抑制剂持续改善强直性脊柱炎患者躯体功能的预测因子 电邮发布日期:2016年3月28日 文献出处: van W ...
- 记一次 .NET某家装ERP系统 内存暴涨分析
一:背景 1. 讲故事 前段时间微信上有一位老朋友找到我,说他的程序跑着跑着内存会突然爆高,有时候会下去,有什么会下不去,怀疑是不是某些情况下存在内存泄露,让我帮忙分析一下,其实内存泄露方面的问题还是 ...
- RT-Thread Studio使用——创建工程并配置外部时钟（转）
硬件:正点原子阿波罗F429开发板,主控STM32F429IGT6,晶振25MHz. 软件:RT-Thread Studio RT-Thread版本:4.1.0 1.创建工程 根据所使用的硬件信息,配 ...
- 微信小程序扫码
前言:微信小程序-->调用摄像头,扫描二维码/条形码,并获取信息,一连串操作,只需要调用微信小程序提供的 wx.scanCode API. 一.生成测试二维码 随便网上找个二维码生成器. 二.实 ...
- 1487. 保证文件名唯一 (Medium)
问题描述 1487. 保证文件名唯一 (Medium) 给你一个长度为 n 的字符串数组 names .你将会在文件系统中创建 n 个文件夹:在第 i 分钟,新建名为 names[i] 的文件夹. 由 ...
- Mysql优化工具
https://blog.csdn.net/qq_29229567/article/details/106241831
- xmind某一天突然打不开了
某一天发现xmind双击后,应用未启动 感谢博主:https://www.cnblogs.com/helloLuoLuo/p/11926530.html 将安装目录下的两个ini文件 将文件中将App ...
- 设置view的圆角和阴影
1.设置view圆角 self.backView.clipsToBounds = YES; self.backView.layer.cornerRadius = 6.f; 2.设置view阴影 sel ...