Vue学习计划基础笔记(四) - 事件处理
事件处理
目标:
- 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符
- 理解在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被销毁时, 所有的事件处理器都会自动被删除,不用清除.
Vue学习计划基础笔记(四) - 事件处理的更多相关文章
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- Vue学习计划基础笔记(六) - 组件基础
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...
- Vue学习计划基础笔记(一) - vue实例
最近又重新看vue的文档了,计划是别人写的,之前看过一次,没有考虑太多,只考虑看懂能用就好.看完之后写过写demo,现在是零实际项目经验的,所以这一次打算细看,算是官方文档的二次产物吧,但是不是全部直 ...
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染
Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...
- 学习webpack基础笔记01
学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...
- bash shell学习-shell基础 (笔记)
When you hoist the sails to cross the sea, you willride the wind and cleave the waves. "长风破浪会有时 ...
- 后端开发者的Vue学习之路(四)
目录 上节内容回顾: npm 介绍 安装 常用命令: 补充: 基于npm的Hello World 项目结构分析 用法迁移 小提醒 ES6语法 知识补充 单文件组件 使用注意: 路由 开启路由 定义路由 ...
- vue学习指南:第四篇(详细) - vue的 :class 和 :style
1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...
随机推荐
- 404 Note Found 队 Alpha8
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...
- HBase可靠性管理方法浅析
HBase是一个可以进行实时读和写操作的分布式NoSQL系统,建立在HDFS之上,是Hadoop生态圈中重要的一部分.在HBase中底层存储结构采用的LSM-tree的方式进行处理,为了保证HBase ...
- .net core API 使用swagger
第一种方法:直接添加swagger,会在app_start中生成SwaggerConfig,在该文件中配置相关内容(把生成xml打开): 第二种方法:添加四个引用文件Swashbuckle.AspNe ...
- 编程开发之--Oracle数据库--存储过程和存储函数(2)
上一小结我们简单介绍了存储过程和存储函数,对存储过程和存储函数有了一个基本的了解,接下来介绍在java程序中如何调用我们创建的存储过程和存储函数 1.在应用程序中调用我们的存储过程 创建一个简单的Ja ...
- 如何创建一个新的vue项目
一.cnpm安装 1.百度node官网,进入官网下载安装包安装好node环境 2.成功后打开cmd命令行工具,执行node-v命令,查看node版本号,如果能输出版本号说明安装成功 3.推荐使用淘宝 ...
- 基于Vue实现可以拖拽的树形表格(原创)
因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...
- PHP读取excel表格,和导出表格
读取表格 public function excel(){ import("Common.Vendor.Excel.PHPExcel"); $filename="./fi ...
- laravel5.5源码笔记(一、入口应用的初始化)
laravel的项目入口文件index.php如下 define('LARAVEL_START', microtime(true)); require __DIR__.'/../vendor/auto ...
- MLT的学习理解
MLT的学习理解 MLT是一个开源的多媒体库,我们的音视频编辑工具,是使用它作为底层支持,某司的'快剪辑'pc版和安卓版,也是用的它. MLT简介 它的GitHub地址,这个库比较老了,现在只有一个作 ...
- Git 命令及使用经验
手册中的基本命令: CONFIGURE TOOLING Configure user information for all local repositories $ git config --glo ...