v-on(事件处理)
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(事件处理)的更多相关文章
- Android开发之基于监听的事件处理
在Android 应用开发过程中,常用监听事件如下:(1) ListView事件监听setOn ItemSelectedListener:鼠标滚动时触发setOnItemClickListener: ...
- 教我徒弟Android开发入门(二)
前言: 上一期实现了简单的QQ登录效果,这一期继续对上一期进行扩展 本期的知识点: Toast弹窗,三种方法实现按钮的点击事件监听 正文: Toast弹窗其实很简单,在Android Studio ...
- 计算机组成原理——输入输出(I/O)系统考研题
(一) I/O系统基本概念 (二) 外部设备 1. 输入设备:键盘.鼠标2. 输出设备:显示器.打印机3. 外存储器:硬盘存储器.磁盘阵列.光盘存储器 (三) I/ ...
- android事件处理之基于监听
Android提供了了两种事件处理方式:基于回调和基于监听. 基于监听: 监听涉及事件源,事件,事件监听器.用注册监听器的方法将某个监听器注册到事件源上,就可以对发生在事件源上的时间进行监听. 最简单 ...
- Android开发2:事件处理及实现简单的对话框(Toast,AlertDialog,Snackbar,TextInputLayout的使用)
前言 啦啦啦~又要和大家一起学习Android开发啦,博主心里好激动哒~ 在上篇博文中,我们通过线性布局和基础组件的使用,完成了一个简单的学生课外体育积分电子认证系统的界面,本篇博文,将和大家一起熟悉 ...
- Android学习起步 - Button按钮及事件处理
按钮和文本框算是比较简单的控件了,以下主要讲按钮的事件响应,三种写法(匿名内部类响应事件.外部类响应事件.本类直接响应事件) 点击按钮后文本框中会显示 ”按钮被单击了”,先看效果: 以下是这个界面的布 ...
- 20个优秀的 JavaScript 键盘事件处理库
键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验.下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理 ...
- Android按键事件处理流程 -- KeyEvent
刚接触Android开发的时候,对touch.key事件的处理总是一知半解,一会是Activity里的方法,一会是各种View 中的,自己始终不清楚到底哪个在先哪个在后,总之对整个处理流程没能很好的把 ...
- Android的两种事件处理机制
UI编程通常都会伴随事件处理,Android也不例外,它提供了两种方式的事件处理:基于回调的事件处理和基于监听器的事件处理. 对于基于监听器的事件处理而言,主要就是为Android界面组件绑定特定的事 ...
- webkit事件处理
1,概述 原文地址:http://blog.csdn.net/awebkit/article/details/8493716 浏览器处理事件一般有两个过程,捕获过程和冒泡过程,这是由addEventL ...
随机推荐
- MySQL5.6 windows msi安装介绍
200 ? "200px" : this.width)!important;} --> 一.功能介绍 1.MySQL Servers 该功能是mysql主要的服务,也是必须安 ...
- 0626-TP整理二(调试模式,空操作,跨控制器调用,跨方法跳转--redirect(),框架语法,创建model模型)
一.调试模式(入口文件:index.php) define('APP_DEBUG', true); //调试模式 define('APP_DEBUG', FALSE); //运行模式 开启日志信息 ...
- 最近我总结的常用mate标签-常用mate标签
昨天开始上班 ,今天晚上不是太忙 ,来写篇博客了 meta元素共有三个可选属性(http-equiv.name和scheme)和一个必选属性(content),content定义与 http-equ ...
- PostgreSQL逻辑复制之pglogical篇
PostgreSQL逻辑复制之slony篇 一.pglogical介绍 pglogical 是 PostgreSQL 的拓展模块, 为 PostgreSQL 数据库提供了逻辑流复制发布和订阅的功能. ...
- redis在linux安装和开机启动和结合php运用方法一
第一部分:安装redis 希望将redis安装到此目录 1 /usr/local/redis 希望将安装包下载到此目录 1 /usr/local/src 那么安装过程指令如下: 1 2 3 4 5 6 ...
- spring cxf 配置步骤
spring 项目增加web service的步骤:1.复制cxf的jar包2.web.xml配置cxf的核心控制器:org.apache.cxf.transport.servlet.CXFServl ...
- [Usaco2011 Jan]道路和航线
Description Farmer John正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到T个城镇 (1 <= T <= 25,000),编号为1T.这些城镇之间通过R条 ...
- 2017杭电多校第七场1005Euler theorem
Euler theorem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others) ...
- python如何添加浏览器驱动路径
闲来无事,整一整python+selenium,写完代码后运行发现找不到webdriver的路径:之前是仿照java一样直接把webdriver放到浏览器的安装目录下 迫于无奈,只好查一下问题如何处理 ...
- Echarts修改legend样式
legend: { icon: 'rect', itemWidth: 20, itemHeight: 10, itemGap: 10}