1.监听事件

   v-on:click="msg+=1" (msg是写在data里)

2.方法事件处理器

  v-on:click = "jia" (jia是写在methods)

3.内联处理器方法

  v-on:click="jia('at')" (jia是写在methods,jia函数带参数)

4.事件修饰符

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

5.键值修饰符

v-on:keydown=“”(获取不同键的键值)

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

v-on(事件处理)的更多相关文章

  1. Android开发之基于监听的事件处理

    在Android 应用开发过程中,常用监听事件如下:(1) ListView事件监听setOn ItemSelectedListener:鼠标滚动时触发setOnItemClickListener: ...

  2. 教我徒弟Android开发入门(二)

    前言: 上一期实现了简单的QQ登录效果,这一期继续对上一期进行扩展 本期的知识点: Toast弹窗,三种方法实现按钮的点击事件监听 正文:   Toast弹窗其实很简单,在Android Studio ...

  3. 计算机组成原理——输入输出(I/O)系统考研题

    (一)   I/O系统基本概念 (二)   外部设备 1.     输入设备:键盘.鼠标2.     输出设备:显示器.打印机3.     外存储器:硬盘存储器.磁盘阵列.光盘存储器 (三)   I/ ...

  4. android事件处理之基于监听

    Android提供了了两种事件处理方式:基于回调和基于监听. 基于监听: 监听涉及事件源,事件,事件监听器.用注册监听器的方法将某个监听器注册到事件源上,就可以对发生在事件源上的时间进行监听. 最简单 ...

  5. Android开发2:事件处理及实现简单的对话框(Toast,AlertDialog,Snackbar,TextInputLayout的使用)

    前言 啦啦啦~又要和大家一起学习Android开发啦,博主心里好激动哒~ 在上篇博文中,我们通过线性布局和基础组件的使用,完成了一个简单的学生课外体育积分电子认证系统的界面,本篇博文,将和大家一起熟悉 ...

  6. Android学习起步 - Button按钮及事件处理

    按钮和文本框算是比较简单的控件了,以下主要讲按钮的事件响应,三种写法(匿名内部类响应事件.外部类响应事件.本类直接响应事件) 点击按钮后文本框中会显示 ”按钮被单击了”,先看效果: 以下是这个界面的布 ...

  7. 20个优秀的 JavaScript 键盘事件处理库

    键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验.下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理 ...

  8. Android按键事件处理流程 -- KeyEvent

    刚接触Android开发的时候,对touch.key事件的处理总是一知半解,一会是Activity里的方法,一会是各种View 中的,自己始终不清楚到底哪个在先哪个在后,总之对整个处理流程没能很好的把 ...

  9. Android的两种事件处理机制

    UI编程通常都会伴随事件处理,Android也不例外,它提供了两种方式的事件处理:基于回调的事件处理和基于监听器的事件处理. 对于基于监听器的事件处理而言,主要就是为Android界面组件绑定特定的事 ...

  10. webkit事件处理

    1,概述 原文地址:http://blog.csdn.net/awebkit/article/details/8493716 浏览器处理事件一般有两个过程,捕获过程和冒泡过程,这是由addEventL ...

随机推荐

  1. Vue Router过渡动效

    <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition> <router- ...

  2. 常用的八大排序算法,含java实例(copy)

    说明:转载于http://www.cnblogs.com/qqzy168/archive/2013/08/03/3219201.html 分类: 1)插入排序(直接插入排序.希尔排序) 2)交换排序( ...

  3. 符号修饰与函数签名、extern “C”(转载)

    转自:http://www.cnblogs.com/monotone/archive/2012/11/16/2773772.html 参考资料: <程序员的自我修养>3.5.3以及3.5. ...

  4. bzoj 1833: [ZJOI2010]count 数字计数【数位dp】

    非典型数位dp 先预处理出f[i][j][k]表示从后往前第i位为j时k的个数,然后把答案转换为ans(r)-ans(l-1),用预处理出的f数组dp出f即可(可能也不是dp吧--) #include ...

  5. tfs

    安装Team Foundation Server 2012过程截图 专题图 1,下载Team Foundation Server 2012  官方下载: http://www.microsoft.co ...

  6. 【杂文】5亿大质数表(5e8)

    [杂文]\(5\) 亿大质数表(\(5e8\)) 在写哈希,刷数论题时曾一度想要查质数,\(F**k\) 百度文库数据又少,翻页蛋疼,还不给复制,真的是服了. 于是在我闲的蛋疼的时候就搞了个质数表出来 ...

  7. mysql的子查询的提高

    统计胜负结果的sql语句 date                       result 2011-02-01          胜 2011-02-01          负 2011-02-0 ...

  8. post和get区别,其他答案真的太坑

    原理: get和post都是http定义与服务器交互的方法,还有put,delete url是网络上的资源,那么http中的get,post,put,delete对应的就是对这个资源的查,改,增,删四 ...

  9. vue中sync,v-model----双向数据绑定

    需求:父子组件同步数据 实现方式:sync或者v-model 一.sync 官网:https://cn.vuejs.org/v2/guide/components-custom-events.html ...

  10. Scala简单计算实例,其在数据分析方面的优势体会

    程序只是简单的从文件中读取数据,并进行计算. package com.bill.www /** * Created by Bill on 2016/2/3. * 目的:用scala实现简单的数据计算 ...