vue 事件处理器
事件处理器
1.监听事件
可以用v-on指令监听DOM事件来触发一些js代码。
2.方法事件处理器
许多事件处理的逻辑都很复杂,所以直接把js代码写在v-on指令中是不可行的。因此v-on可以接受一个定义的方法来调用
3.内联处理器方法
除了直接绑定到一个方法,也可以用内联js语句
有时也需要在内联语句处理器中访问原生DOM事件。可以用特殊变量$event把它传入方法。
// ...
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
|
4.事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在methods中轻松实现这点,但更好的方式是:methods只有纯粹的数据逻辑,而不是去处理DOM事件细节。
为了解决这个问题,vue.js为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.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>
- 不想其它只能对原生的DOM事件起作用的修饰符,.once修饰符还能被用到自定义的组件事件中
5.键值修饰符
在监听键盘事件时,我们经常需要监测常见的键值。Vue允许为v-on在监听键盘事件时添加关键修饰符。
为什么在HTML中监听事件?
你可能已经注意到这种监听事件的方式违背了关注点分离(separation of concern)传统理念。
不必担心,因为所有的vue.js事件处理方法和表达式都严格绑定在当前视图的viewModel上,它不会导致任何维护上的困难。实际上,使用v-on有几个好处
1,扫一眼HTML便能轻松定位在js代码里对应的方法。
2,因为你无须在js里手动绑定事件,你的viewModel可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试。
3,当一个viewModel被销毁时,所有的事件处理器都会被自动删除,你无须担心如何清理他们。
vue 事件处理器的更多相关文章
- vue事件处理器
1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. 示例: <div id="example-1"> <button ...
- 关于vue.js中事件处理器的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue.js学习 Item8 -- 方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...
- Vue深度学习(4)-方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="app"> <button v-on:click = "greet" ...
- Vue.js:事件处理器
ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...
- Vue样式绑定和事件处理器
一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...
- Vue进阶之事件处理器
过滤 <html> <head> <meta charset="UTF-8"> <meta name="viewport&quo ...
- 详解Vue 方法与事件处理器
本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
随机推荐
- 【字符串哈希】【BKDRhash】【Rabin-Karp算法】模板
#include<cstdio> #include<iostream> #include<cstring> #include<string> #incl ...
- Android中的动态字符串的处理
1.效果显示 2. MainAcitivity.java package com.example.app2; import android.support.v7.app.AppCompatActivi ...
- LVS+Keepalived实现高可用
http://blog.chinaunix.net/uid-16723279-id-3651396.html
- 解决IIS服务和用户上传的文件分别部署在不同的电脑上时,解决权限的问题
为解决IIS服务和用户上传的文件分别部署在不同的电脑上时,解决权限的问题. 定义: A:iis服务器 B:文件服务器 步骤: 1.在B上创建一个用户[uploaduser](并设置密码) 2.给B上的 ...
- Mysql -- Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’解决方法
启动mysql 报错: ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var/lib/mysql/m ...
- 怎么在VS2010中打开VS2013的项目
其实VS2010与VS2013上的sln文件没有本质的区别.打不开的原因是什么呢?其实原因很简单,两者开头的软件信息不同.因此造成低版本VS的不识别. VS2013版本vs.sln文件开头的软件信息: ...
- Go语言的9大优势和3大缺点, GO语言最初的定位就是互联网时代的C语言, 我为什么放弃Go语言
Go语言的9大优势和3大缺点 转用一门新语言通常是一项大决策,尤其是当你的团队成员中只有一个使用过它时.今年 Stream 团队的主要编程语言从 Python 转向了 Go.本文解释了其背后的九大原因 ...
- mahout运行测试与数据挖掘算法之聚类分析(一)kmeans算法解析
在使用mahout之前要安装并启动hadoop集群 将mahout的包上传至linux中并解压即可 mahout下载地址: 点击打开链接 mahout中的算法大致可以分为三大类: 聚类,协同过滤和分类 ...
- 如何在Ubuntu上使用Glances监控系统
导读 Glances 是一个用于监控系统的跨平台.基于文本模式的命令行工具.它是用 Python 编写的,使用 psutil 库从系统获取信息.你可以用它来监控 CPU.平均负载.内存.网络接口.磁盘 ...
- 搭建svnserve并创建提交钩子
之前做过很多这个过程了,但每次总有些地方不记得要查资料,现在顺手记录一下,以后好查. 安装svn apt-get install subversion 创建代码仓库 svnadmin create & ...