Vue学习计划基础笔记(四) - 事件处理
2024-08-26 10:50:43
事件处理
目标:
- 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符
- 理解在html中监听事件的意义
监听事件(v-on)
- 类似普通的on,例如v-on:click或@click就相当于普通的onclick, v-on调用的是vue实例methods里面的方法.
- v-on不只可以调用methods的方法, 也可以执行一些js表达式
- 传入特殊变量$event就可以访问到元素的DOM事件
事件修饰符
- 修饰符
.stop // 阻止事件传播
.prevent // 阻止默认行为
.capture // 使用事件捕获模式(先自身处理,再次交由内部元素处理)
.self // 当event.target是当前元素自身时触发(其他元素引起的不会生效)
.once // 只能触发一次
.passive // 让默认行为立即触发 - 修饰符加在事件名称后面,而且可以串联,也可以只有修饰符
例如: <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>
按键事件修饰符
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
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
为什么在HTML中监听事件
实质上所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上
而使用v-on有以下好处:
- 方便查看模版绑定的事件以及能轻松定位js代码里面对应的方法
- 无需js手动绑定事件,和dom解耦,易于测试
- 当一个ViewModel被销毁时, 所有的事件处理器都会自动被删除,不用清除.
最新文章
- javaScript语法总结
- 错误-spring3.2的架构在tomcat6.0中无法正常启动,抛出java.lang.NoClassDefFoundError: javax/servlet/AsyncListener
- Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局
- JAVA8 十大新特性详解
- 一个小笔记(7):EN_1
- 浏览器后退按钮导致jquery动态添加的select option值丢失的解决方法
- 【HDOJ】1504 Disk Tree
- HDU4712-----Hamming Distance------超级大水题
- UVa1003-Cutting sticks
- C#中设置TextBox控件中仅可以输入数字且设置上限
- 当yum安装出现Error: Package: glibc-headers .....时
- oData 排序字段生成
- Django初级手册1-项目和应用的创建与简单的数据库操作
- java关于null的介绍及比较问题..未完待续
- Solr如何使用in语法查询
- HTTP状态码列表
- VC 调试技术与异常(错误)处理 VC 调试技术与异常(错误)处理
- 分块+deque维护 Codeforces Round #260 (Div. 1) D. Serega and Fun
- 算法5-6:Kd树
- C# 预定义语言