Vue基础之事件处理器

监听事件:

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码

示例
这里写图片描述

方法事件处理器:

许多事件处理的逻辑都很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用

示例
这里写图片描述

内联处理器方法:

除了直接绑定到一个方法,也可以用内联 JavaScript 语句
这里写图片描述
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
这里写图片描述

事件修饰符:

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节

为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符

.stop、.prevent、.capture、.self

这里写图片描述

按键修饰符:

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
这里写图片描述
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名
这里写图片描述

全部的按键别名:
enter、tab、delete (捕获 “删除” 和 “退格” 键)、esc、space、up、down、left、right

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407679.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React开发(102):别写立即执行函数

<Buttontype"link"onClick{() > {this.handlePro(row.certificationImg);}}>查看</Button>

删除windows换行符^M

有些内容从windows下拷贝到unix下后&#xff0c;发现文本文件中多了^M&#xff08;在vim中查看&#xff09;&#xff0c;那么如何删除这个字符呢。 在网上找了下答案&#xff0c;有好几种方法&#xff0c;但是我试了下&#xff0c;只有一种是成功的&#xff0c;那就是”tr -d &…

React开发(103):详细路径 不然找不到

import { BaseTabs, BaseUploadImage, BaseHighSearch, BaseTable } from /common/components; import BaseTables from /common/components/BaseTables;

vmin、vmax用处

vmin、vmax用处 100vmin指的是屏幕宽和高中较小的那个 100vmax指的是屏幕宽和高中较大的那个 做移动页面开发时&#xff0c;如果使用 vw、wh 设置字体大小&#xff08;比如 5vw&#xff09;&#xff0c;在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当…

分享SharpZipLip使用代码

zip类public class ZipClass { /**//// <summary> /// 压缩方法 /// </summary> /// <param name"strPath">要压缩文件夹</param> /// <param name"strFileName">生成的文件名</p…

Vue基础之表单控件绑定

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇&#xff0c;但 v-model 本质上不过是语法糖&#xff0c;它负责监听用户的输入事件以更新数据&#xff0c;并特别处理一些极端的例子 基础用法&#xff1…

Makefile函数使用

使用函数 在Makefile中可以使用函数来处理变量&#xff0c;从而让我们的命令或是规则更为的灵活和具有智能。make所支持的函数也不算很多&#xff0c;不过已经足够我们的操作了。函数调用后&#xff0c;函数的返回值可以当做变量来使用。 [编辑] 函数的调用语法 函数调用&am…

[LeetCode] Search in Rotated Sorted Array

二分 : 判断条件 当a[left] < a[mid]时&#xff0c;可以肯定a[left..mid]是升序的 循环有序 一共有以下两种情况 第一种 / / / /    /  /  条件&#xff1a; (A[mid] > A[low]) &#xff0c;low~mid 二分&#xff0c;mid~high 递归 第二种 /  / / /   / /  条件…

失败者的特征

1 狂妄自大型:自以为老子天下第一,认为自己的认识才是正确的,才是没有错误的,实际上这些人的知识大部分来自于道听途说或是妄自没有求证的猜测就下定论,并一棍子打死,还不允许其它人也相信.2 口是心非型:心里面还是相信有某种力量能够支配人生,甚至还会经常拿着彩票的轨迹图天天…

@keyframes中translate和scale混用问题

当你动画的这个节点用到translate定位居中时&#xff0c;再使用动画scale就会出现不居中的问题 这时需要把keyframes中translate写在scale的前面就解决了 keyframes bubble-in {0% {transform:translateX(-50%) scale(0);}100% {transform:translateX(-50%) scale(1);} }

导入 IMP

Oracle 的导入实用程序 (Import utility) 允许从数据库提取数据&#xff0c;并且将数据写入操作系统文件。 imp 使用的基本格式&#xff1a; imp[username[/password[service]]] &#xff0c;以下例举 imp 常用用法。 1. 获取帮助 imp helpy 2. 导入一个完整数据库 imp sy…

Vue基础之组件

什么是组件&#xff1f; 组件&#xff08;Component&#xff09;是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素&#xff0c;封装可重用的代码。在较高层面上&#xff0c;组件是自定义元素&#xff0c; Vue.js 的编译器为它添加特殊功能。在有些情况下&#xff0c;组件也…

sql 保留小数

select ROUND(12.555, 2) --12.560 select cast(12.5550 as decimal(10,2)) --12.56 转载于:https://www.cnblogs.com/kedarui/p/3791337.html

React开发(105):没有定义变量报错

const { pageIndex, pageSize, selectTabVal, sortModel } this.state;

常用的前端JavaScript方法封装(49种)

1、输入一个值&#xff0c;返回其数据类型 function type(para) { return Object.prototype.toString.call(para) } 2、数组去重 function unique1(arr) { return […new Set(arr)] } function unique2(arr) { var obj {}; return arr.filter(ele > { if (!obj[ele]) { ob…

发一个flash+PHP的简单上传代码

示例文件1。Flash8:uploader.as--------------------------------------------------------------------------------import flash.net.FileReference; //调用上传控件&#xff0c;这个是必须的&#xff0c;要传文件就要用这个控件var frT…

Oracle SQL Loader数据导入

1、SQL LOADER是ORACLE的数据加载工具&#xff0c;通常用来将操作系统文件迁移到ORACLE数据库中。SQL*LOADER是大型数据仓库选择使用的加载方法&#xff0c;因为它提供了最快速的途径&#xff08;DIRECT&#xff0c;PARALLEL&#xff09;。 它使用的命令为&#xff1a;在NT下&a…

反射获取类的几种方法

1 public class Demo {2 3 /**4 * 反射&#xff1a;加载类&#xff0c;获得类的字节码5 * param args6 * throws ClassNotFoundException 7 */8 public static void main(String[] args) throws ClassNotFoundException {9 10 //…

Webpack基础之四个核心介绍

入口(Entry)&#xff1a; webpack 将创建所有应用程序的依赖关系图表(dependency graph)。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始&#xff0c;并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual…