详解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高级笔记
Jul 13 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
判断访客终端类型集锦
Jun 05 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
深入理解js promise chain
May 05 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
Java 生成随机字符的示例代码
Jan 13 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安全配置
2006/12/06 PHP
php学习 函数 课件
2008/06/15 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python闭包思想与用法浅析
2018/12/27 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
中专生自荐信
2013/10/12 职场文书
营销专业应届生求职信
2013/11/26 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
2015年财务部工作总结
2015/04/10 职场文书
小学教师读书笔记
2015/07/01 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python