详解vue中v-on事件监听指令的基本用法


Posted in Javascript onJuly 22, 2020

一、本节说明

我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件、拖拽事件、键盘事件等等。这就需要用到我们下面要学习的内容v-on指令。
我们通过一个简单的计数器的例子,来讲解v-on指令的使用。

二、 怎么做

详解vue中v-on事件监听指令的基本用法

  • 定义数据counter,用于表示计数器数字,初始值设置为0
  • v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数
  • 表达式counter++和counter--分别实现计数器数值的加1和减1操作
  • 语法糖:我们可以将v-on:click简写为@click

三、 效果

详解vue中v-on事件监听指令的基本用法

  • 点击加号数值加1
  • 点击减号数值减1

四、 深入

表达式只适用于简单的数据操作场景。如果操作比较复杂,我们要使用函数的方式实现。

详解vue中v-on事件监听指令的基本用法

定义methods:incr与decr分别实现加一和减一操作

详解vue中v-on事件监听指令的基本用法

 附录:js常用可监听事件列表

属性 事件何时触发
abort 图像的加载被中断。
blur 元素失去焦点。
change 域的内容被改变。
click 当用户点击某个对象时调用的事件句柄。
dblclick 当用户双击某个对象时调用的事件句柄。
error 在加载文档或图像时发生错误。
focus 元素获得焦点。
keydown 某个键盘按键被按下。
keypress 某个键盘按键被按下并松开。
keyup 某个键盘按键被松开。
load 一张页面或一幅图像完成加载。
mousedown 鼠标按钮被按下。
mousemove 鼠标被移动。
mouseout 鼠标从某元素移开。
mouseover 鼠标移到某元素之上。
mouseup 鼠标按键被松开。
reset 重置按钮被点击。
resize 窗口或框架被重新调整大小。
select 文本被选中。
submit 确认按钮被点击。
unload 用户退出页面。

以上就是详解vue中v-on事件监听指令的基本用法的详细内容,更多关于vue v-on指令的用法的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS读取XML文件示例代码
Nov 15 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
使用vue实现通过变量动态拼接url
Jul 22 #Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 #Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 #Javascript
vue props 一次传多个值实例
Jul 22 #Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 #Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 #Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 #Javascript
You might like
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python求列表交集的方法汇总
2014/11/10 Python
python常用知识梳理(必看篇)
2017/03/23 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
大学毕业登记表自我鉴定
2013/10/09 职场文书
公积金转移接收函
2014/01/11 职场文书
中学生自我评价范文
2014/02/08 职场文书
卫生巾广告词
2014/03/18 职场文书
入党介绍人评语
2014/05/06 职场文书
勇敢的心观后感
2015/06/09 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js