详解vue中v-on事件监听指令的基本用法
作者：字母哥博客 发布时间：2023-07-02 17:06:37
标签：vue,v-on,事件监听,指令
一、本节说明
我们在开发过程中经常需要监听用户的输入，比如：用户的点击事件、拖拽事件、键盘事件等等。这就需要用到我们下面要学习的内容v-on指令。
我们通过一个简单的计数器的例子，来讲解v-on指令的使用。
二、 怎么做
定义数据counter，用于表示计数器数字，初始值设置为0
v-on:click 表示当发生点击事件的时候，触发等号里面的表达式或者函数
表达式counter++和counter--分别实现计数器数值的加1和减1操作
语法糖：我们可以将v-on:click简写为@click
三、 效果
点击加号数值加1
点击减号数值减1
四、 深入
表达式只适用于简单的数据操作场景。如果操作比较复杂，我们要使用函数的方式实现。
定义methods：incr与decr分别实现加一和减一操作
附录：js常用可监听事件列表
| 属性 | 事件何时触发 |
| abort | 图像的加载被中断。 |
| blur | 元素失去焦点。 |
| change | 域的内容被改变。 |
| click | 当用户点击某个对象时调用的事件句柄。 |
| dblclick | 当用户双击某个对象时调用的事件句柄。 |
| error | 在加载文档或图像时发生错误。 |
| focus | 元素获得焦点。 |
| keydown | 某个键盘按键被按下。 |
| keypress | 某个键盘按键被按下并松开。 |
| keyup | 某个键盘按键被松开。 |
| load | 一张页面或一幅图像完成加载。 |
| mousedown | 鼠标按钮被按下。 |
| mousemove | 鼠标被移动。 |
| mouseout | 鼠标从某元素移开。 |
| mouseover | 鼠标移到某元素之上。 |
| mouseup | 鼠标按键被松开。 |
| reset | 重置按钮被点击。 |
| resize | 窗口或框架被重新调整大小。 |
| select | 文本被选中。 |
| submit | 确认按钮被点击。 |
| unload | 用户退出页面。 |
来源：https://www.kancloud.cn/hanxt/vuejs2/1260625
0
投稿猜你喜欢
第一次使用csdn写一个文章，如果有什么写的不对的地方，欢迎在下面评论指正，谢谢各位。1.明确要使用的包首先就是opencv的函数库，还有p- 1. MySQL慢查询介绍 MySQL的慢查询日志是MySQL提供的一种日志记录，它用来记录在MySQL中响应时间超
- 用pycharm进行debug① 直接在代码中设断点（点击代码的左边）②右击点击debug有几种debug方式，我们可以在pycharm的下
- 先给大家介绍下sqlserver给表添加新字段、给表和字段添加备注、更新备注及查询备注，代码如下所示：-- 添加新字段及字段备注的语法USE
- 数据模型==对象模型Python官方文档说法是“Python数据模型”，大多数Python书籍作者说法是“Python对象模型”，它们是一个
- 锁定数据库的一个表SELECT * FROM table WITH (HOLDLOCK)注意: 锁定数据库的一个表的区别SELECT * F
- 在Python中的while或者for循环之后还可以有else子句，作用是for循环中if条件一直不满足，则最后就执行else语句。for
- 首先来看一个小程序，这个是计量所花费时间的程序，以下是以往的解决示例from functools import wraps, partial
- 串口通信是指外设和计算机间，通过数据信号线 、地线、控制线等，按位进行传输数据的一种通讯方式。这种通信方式使用的数据线少，在远距离通信中可以
- 前言YOLOV5模型从发布到现在都是炙手可热的目标检测模型，被广泛运用于各大场景之中。因此，我们不光要知道如何进行yolov5模型的训练，而
- 1.主要功能如下：1.classification分类2.Regression回归3.Clustering聚类4.Dimensionalit
- 为了防止网络上日益猖獗的垃圾广告和灌水评论，大多数网站在信息发布的时候要求输入验证码。图片、文字、字母甚至还有计算题。验证码图片里的信息东颠
- 基于pygame的飞机大作战小游戏，适合新手，不能直接运行，只能在命令行进入当前游戏目录，输入python game.py才能够运行，尚不知
- 1. 环境准备1.1 安装pillow 和 pytesseractpython模块库需要 pillow 和 pytesseract 这两个库
- 如何做一个全面的探测器？ 我们也可以做一个功能类似的探测器，见下：<Script lan
- 前言ThinkPHP,是为了简化企业级应用开发和敏捷WEB应用开发而诞生的开源轻量级PHP框架。随着框架代码量的增加，一些潜在的威胁也逐渐暴
- 目录一、定义二、作用三、导入1.import导入import 模块名from importfrom 模块名 import *总结一、定义包含
- 通过学习装饰器可以让我们更好更灵活的使用函数，通过学会使用装饰器还可以让我们的代码更加优雅。在我们的实际工作中，很多场景都会用到装饰器，比如
- 问题:无法上传较大的文件“Request 对象 错误 'ASP 0104 : 80004005'”或者上传成功后，找不到文件
- 如我们在之前的教程里讨论的那样,分页可以通过两种方法来实现:默认分页– 你仅仅只用选中data Web control的 智能标签的Enab
