详解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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 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
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
js实现tab切换效果
2017/02/16 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
日语求职信范文
2013/12/17 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
怎么写好自荐书
2014/03/02 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
法律六进活动方案
2014/03/13 职场文书
安全生产管理责任书
2014/04/16 职场文书
小学生评语大全
2014/04/18 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
电工实训报告总结
2014/11/05 职场文书
乱世佳人观后感
2015/06/08 职场文书
总经理致辞
2015/07/29 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL