博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue学习计划基础笔记(四) - 事件处理
阅读量:6279 次
发布时间:2019-06-22

本文共 917 字,大约阅读时间需要 3 分钟。

事件处理

目标:

  1. 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符
  2. 理解在html中监听事件的意义

监听事件(v-on)

  1. 类似普通的on,例如v-on:click或@click就相当于普通的onclick, v-on调用的是vue实例methods里面的方法.
  2. v-on不只可以调用methods的方法, 也可以执行一些js表达式
  3. 传入特殊变量$event就可以访问到元素的DOM事件

事件修饰符

  1. 修饰符
    .stop // 阻止事件传播
    .prevent // 阻止默认行为
    .capture // 使用事件捕获模式(先自身处理,再次交由内部元素处理)
    .self // 当event.target是当前元素自身时触发(其他元素引起的不会生效)
    .once // 只能触发一次
    .passive // 让默认行为立即触发
  2. 修饰符加在事件名称后面,而且可以串联,也可以只有修饰符
例如: 去百度

按键事件修饰符

1.键盘事件

@keydown // 键盘按下事件
@keyup // 键盘松开事件

2.修饰符(按键别名)

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

除此之外,可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 `v-on:keyup.f1`Vue.config.keyCodes.f1 = 112

3.系统控制组合修饰

.ctrl
.alt
.shift
.meta

Do something

为什么在HTML中监听事件

实质上所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上

而使用v-on有以下好处:

  1. 方便查看模版绑定的事件以及能轻松定位js代码里面对应的方法
  2. 无需js手动绑定事件,和dom解耦,易于测试
  3. 当一个ViewModel被销毁时, 所有的事件处理器都会自动被删除,不用清除.

转载于:https://www.cnblogs.com/chifung/p/9323348.html

你可能感兴趣的文章
App 卸载记录
查看>>
南京大学周志华教授当选欧洲科学院外籍院士
查看>>
计算机网络与Internet应用
查看>>
Django 文件下载功能
查看>>
走红日本 阿里云如何能够赢得海外荣耀
查看>>
磁盘空间满引起的mysql启动失败:ERROR! MySQL server PID file could not be found!
查看>>
点播转码相关常见问题及排查方式
查看>>
[arm驱动]linux设备地址映射到用户空间
查看>>
弗洛伊德算法
查看>>
【算法之美】求解两个有序数组的中位数 — leetcode 4. Median of Two Sorted Arrays
查看>>
精度 Precision
查看>>
Android——4.2 - 3G移植之路之 APN (五)
查看>>
Linux_DHCP服务搭建
查看>>
[SilverLight]DataGrid实现批量输入(like Excel)(补充)
查看>>
秋式广告杀手:广告拦截原理与杀手组织
查看>>
翻译 | 摆脱浏览器限制的JavaScript
查看>>
闲扯下午引爆乌云社区“盗窃”乌云币事件
查看>>
02@在类的头文件中尽量少引入其他头文件
查看>>
JAVA IO BIO NIO AIO
查看>>
input checkbox 复选框大小修改
查看>>