详解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代码
Apr 02 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
jquery创建div 实现代码
Apr 27 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
js常用排序实现代码
Dec 28 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
使用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 计划任务 检测用户连接状态
2012/03/29 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
vue中的mvvm模式讲解
2019/01/31 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
客户经理岗位职责
2013/12/08 职场文书
质量承诺书范文
2014/03/27 职场文书
同居协议书范本
2014/04/23 职场文书
公司内部升职自荐信
2015/03/27 职场文书
小学庆六一主持词
2015/06/30 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL