详解vue中v-on事件监听指令的基本用法

一、本节说明

我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件、拖拽事件、键盘事件等等。这就需要用到我们下面要学习的内容v-on指令。
我们通过一个简单的计数器的例子,来讲解v-on指令的使用。

二、 怎么做

  • 定义数据counter,用于表示计数器数字,初始值设置为0
  • v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数
  • 表达式counter++和counter--分别实现计数器数值的加1和减1操作
  • 语法糖:我们可以将v-on:click简写为@click

三、 效果

  • 点击加号数值加1
  • 点击减号数值减1

四、 深入

表达式只适用于简单的数据操作场景。如果操作比较复杂,我们要使用函数的方式实现。

定义methods:incr与decr分别实现加一和减一操作

附录: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指令的用法的资料请关注我们其它相关文章!

时间: 2020-07-20

VUE中v-on:click事件中获取当前dom元素的代码

在开发中总是忘记,特意在此记录 关键字:   $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS:下面看下v-

vue基础之事件v-onclick="函数"用法示例

本文实例讲述了vue基础之事件v-onclick=函数用法.分享给大家供大家参考,具体如下: v-on:click/mouseout/mouseover/dblclick/mousedown..... 事件: v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'

vue学习笔记之动态组件和v-once指令简单示例

本文实例讲述了vue动态组件和v-once指令.分享给大家供大家参考,具体如下: 点击按钮时,自动切换两个组件 <component :is="type"></component>,当点击按钮之后,会自动清除原来的组件,显示新的组件. 每一次切换,都需要销毁+创建 但是这样消耗有点大,所以我们在子组件中引用了v-once指令,这样可以将显示在页面中的组件存到内存中,不会完全销毁. <!DOCTYPE html> <html lang="

浅谈Vue.js 中的 v-on 事件指令的使用

v-on 事件指令用于绑定事件. 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件. html: <div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</button> </div> 注意: @click 是 v-on:click 的简写形式, @ 即表示 v-on: . js: <script&g

vue.js绑定事件监听器示例【基于v-on事件绑定】

本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

Vue 动态组件components和v-once指令的实现

一.实现两个组件间互相展示.互相隐藏 <!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <ch

对Vue.js之事件的绑定(v-on: 或者 @ )详解

1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g

关于vue3默认把所有onSomething当作v-on事件绑定的思考

最近在重新看vue3的rfcs,发现一个细节,原话如下: props that start with on are handled as v-on bindings, with everything after on being converted to all-lowercase as the event name (more on this below) 也就是说,以后如果你在传递props的时候,以 on 开头的props,如果在组件上没有做props的声明,那么会被当作事件绑定到组件的根

修改 CentOS 6.x 上默认Python的方法

最近在工作中遇到一个问题,就是有一个功能希望在各种服务器上实现,而服务器上的系统版本可能都不一样,有的是 CentOS 6.x,有的是 CentOS 7.x . 需要说明的一点是,CentOS 6.x 上的 Python 版本是 2.6.x 的,而 CentOS 7.x 上的 Python 版本是 2.7.x 的,这意味着我要实现的功能要适配这两种版本的系统. 你可能会说,这有什么的,自己写的时候,注意一下就好了. 事情其实没有那么容易,我要实现的功能是基于一个框架进行定制,需要修改不少的框架代

return false,对阻止事件默认动作的一些测试代码

首先页面上有一个 <textarea id="test"></textarea> 我们为其绑定以下事件 复制代码 代码如下: test.onkeydown = function(){ return false; } test.onkeyup = function(){ return false; } test.onkeypress = function(){ return false; } 我们分别注释掉其中的两个事件,每次测试仅绑定一个事件. 很明显我们每个函

浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancel

js事件冒泡、事件捕获和阻止默认事件详解

谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo

深入讨论Python函数的参数的默认值所引发的问题的原因

本文将介绍使用mutable对象作为Python函数参数默认值潜在的危害,以及其实现原理和设计目的 陷阱重现 我们就用实际的举例来演示我们今天所要讨论的主要内容. 下面一段代码定义了一个名为 generate_new_list_with 的函数.该函数的本意是在每次调用时都新建一个包含有给定 element 值的list.而实际运行结果如下: Python 2.7.9 (default, Dec 19 2014, 06:05:48) [GCC 4.2.1 Compatible Apple LLV

javascript自动恢复文本框点击清除后的默认文本

本文实例介绍了点击文本框清除默认文本离开再恢复的js实例代码,分享给大家供大家参考,具体内容如下 相关知识: 1.onclick事件的定义和用法: 当点击对象的时候会触发此事件. 浏览器支持: 1).IE浏览器支持此事件. 2).火狐浏览器支持此事件. 3).Opera浏览器支持此事件. 4).谷歌浏览器支持此事件. 5).safria浏览器支持此事件. 实例代码: <html> <head> <meta charset="gb2312"/> <

Python函数的默认参数设计示例详解

在Python教程里,针对默认参数,给了一个"重要警告"的例子: def f(a, L=[]): L.append(a) return L print(f(1)) print(f(2)) print(f(3)) 默认值只会执行一次,也没说原因.会打印出结果: [1] [1, 2] [1, 2, 3] 因为学的第一门语言是Ruby,所以感觉有些奇怪. 但肯定的是方法f一定储存了变量L. 准备知识:指针 p指向不可变对象,比如数字.则相当于p指针指向了不同的内存地址. p指向的是可变对象,

动态设置django的model field的默认值操作步骤

问题背景 django的model field需要动态设置默认值,具体案例如下: 原始代码如下,model是Application,其中字段ignore_fort的默认值设置为False class Application(TimestampedModel): name = models.CharField(max_length=255, null=True) ignore_fort = models.BooleanField(default=False) 然而现在有这样一个需求:default

JQuery事件冒泡和默认行为代码实例

事件的冒泡 什么是事件的冒泡? 就是事件从子元素向父元素传递的一个过程 如何阻止事件的冒泡? 方式一:在事件的回调函数中加上return false; 方式二:在事件回调函数的形参列表中添加event,然后在回调函数中调用event.stopPropagation();. 事件的默认行为 什么是事件的默认行为? 就是像a标签那样,没有绑定事件,但只要点击了就会自动跳转的行为 像提交按钮一样,没有绑定事件,但是点击就会提交表单信息,自动跳转 如何阻止事件的默认行为? 方式一:在事件的回调函数中加上