事件监听

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>

键盘修饰符

使用@事件.键位的形式,来监听用户按下的键盘键位。

当按下的键位与监听的键位相同,则执行监听回调函数。

如下示例,使用组合监听。当再输入框内按下ctrla键时将触发事件的回调函数。

<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 事件监听的更多相关文章

  1. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  2. 关于vue事件监听的一个问题

    由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...

  3. vue事件监听机制

    vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发 组件调用时绑定事件 之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...

  4. vue 事件监听和es6模板语法

    es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?

  5. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  7. vue自定义组件添加原生事件监听

    注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...

  8. Vue学习笔记(二)动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

  9. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  10. vue中监听返回键

    问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...

随机推荐

  1. GMAC网卡相关介绍与分析

    GMAC网卡相关介绍与分析 目录 GMAC网卡相关介绍与分析 环境描述 MII MII RMII GMII RGMII SGMII GMAC网卡信息获取方法 获取GMAC网卡信息 查看PHY工作接口模 ...

  2. ctf 菜鸟杯

    web签到 首先最里面的是ctfshow-QQ群:,而他需要进行cookie传参,因此我们需要在cookie传入CTFshow-QQ群=a,然后就要以POST方式传入a的值,我们传入a=b,而b是以G ...

  3. day05-mybatis配置文件和SQL映射文件

    Mybatis配置文件&SQL映射文件 1.配置文件-mybatis-config.xml 1.1基本说明 mybatis的核心配置文件(mybatis-config.xml),它的作用如配置 ...

  4. Nacos集群搭建(三个节点)

    Nacos集群安装 一,在每台服务器上安装nacos 1,准备安装包 ​ github下载点 2,在/usr/local/目录下创建一个文件夹用于上传和解压Nacos cd /usr/local/ # ...

  5. CSS:linear-gradient()背景颜色渐变

    css语法 background: linear-gradient(direction,color-stop1,color-stop2,...); direction:用角度值指定渐变的方向(或角度) ...

  6. 在vue-element-admin模板中去掉tui-editor

    先删除package.json的"tui-editor": "1.3.3",再安装依赖,不然会报错 1.修改package.json 删除包括tui-edito ...

  7. div 元素内容超出可通过鼠标滚轮实现横向滚动

    移动端中的元素内容超出时,对容器设置overflow-x: auto就可以通过手势水平移动.但是 PC 端只能通过鼠标滚轮上下滑动,而不能水平移动. 只需要给元素添加一个监听鼠标滚轮事件,上下滑动时修 ...

  8. ubuntu 中将DSLR相机用作网络摄像头

    一.安装所需软件 sudo apt-get install gphoto2 v4l2loopback-utils v4l2loopback-dkms ffmpeg 二.Video4Liunx 配置 1 ...

  9. go 程序设计语言 命令行参数

    最近打算读一读 go程序设计语言这本书, 读语言类的书是一件十分头疼的事情, 因为读一本书就意味着,看着一堆钳子 锥子工具的图片, 概念背了一大堆,仍然不知道怎么用,还是要通过实践. 还是习惯任务驱动 ...

  10. Java面向对象之创建对象内存分析

    创建对象内存分析 代码 内存分析 属性 属性:字段Field 成员变量 默认初始化: 1.数字: 0 0.0 2.char: u0000 3.boolean:false 4.引用数据类型:null 5 ...