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. MySQL5.6 windows msi安装介绍

    200 ? "200px" : this.width)!important;} --> 一.功能介绍 1.MySQL Servers 该功能是mysql主要的服务,也是必须安 ...

  2. 0626-TP整理二(调试模式,空操作,跨控制器调用,跨方法跳转--redirect(),框架语法,创建model模型)

    一.调试模式(入口文件:index.php) define('APP_DEBUG', true);  //调试模式 define('APP_DEBUG', FALSE);  //运行模式 开启日志信息 ...

  3. 最近我总结的常用mate标签-常用mate标签

    昨天开始上班  ,今天晚上不是太忙 ,来写篇博客了 meta元素共有三个可选属性(http-equiv.name和scheme)和一个必选属性(content),content定义与 http-equ ...

  4. PostgreSQL逻辑复制之pglogical篇

    PostgreSQL逻辑复制之slony篇 一.pglogical介绍 pglogical 是 PostgreSQL 的拓展模块, 为 PostgreSQL 数据库提供了逻辑流复制发布和订阅的功能. ...

  5. redis在linux安装和开机启动和结合php运用方法一

    第一部分:安装redis 希望将redis安装到此目录 1 /usr/local/redis 希望将安装包下载到此目录 1 /usr/local/src 那么安装过程指令如下: 1 2 3 4 5 6 ...

  6. spring cxf 配置步骤

    spring 项目增加web service的步骤:1.复制cxf的jar包2.web.xml配置cxf的核心控制器:org.apache.cxf.transport.servlet.CXFServl ...

  7. [Usaco2011 Jan]道路和航线

    Description Farmer John正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到T个城镇 (1 <= T <= 25,000),编号为1T.这些城镇之间通过R条 ...

  8. 2017杭电多校第七场1005Euler theorem

    Euler theorem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others) ...

  9. python如何添加浏览器驱动路径

    闲来无事,整一整python+selenium,写完代码后运行发现找不到webdriver的路径:之前是仿照java一样直接把webdriver放到浏览器的安装目录下 迫于无奈,只好查一下问题如何处理 ...

  10. Echarts修改legend样式

    legend: { icon: 'rect', itemWidth: 20, itemHeight: 10, itemGap: 10}