详解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 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
个人小程序接入支付解决方案
May 23 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
nodejs基础应用
2017/02/03 NodeJs
vue调用高德地图实例代码
2017/04/28 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python笔记(叁)继续学习
2012/10/24 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python递归实现快速排序
2018/08/18 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
python re的findall和finditer的区别详解
2020/11/15 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
教师绩效工资方案
2014/02/01 职场文书
超市中秋节促销方案
2014/03/21 职场文书
捐助倡议书范文
2014/04/15 职场文书
企业2014年度工作总结
2014/12/10 职场文书
收费员岗位职责
2015/02/14 职场文书
求职自我评价范文
2015/03/09 职场文书
监护人证明
2015/06/19 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
浅析NIO系列之TCP
2021/06/15 Java/Android