详解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 固定悬浮效果实现思路代码
Aug 02 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP递归创建多级目录
2015/11/05 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
jQuery事件对象总结
2016/10/17 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
js简易版购物车功能
2017/06/17 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python控制Firefox方法总结
2019/06/03 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
物控部经理职务说明书
2014/02/25 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
房屋授权委托书范本
2014/10/07 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书