03Vue事件
Vue提供了事件的绑定,方法写在methods对象中。
绑定dom中有两种方法:
方法一:v-on:click/dblclcick/mouseOver/mouseOut=“方法名”等等
这种和JQuery的事件差不多,在原生态js中去掉了on。
方法二:@click/dblclcick/mouseOver/mouseOut="方法名"。
相对于方法一,将v-on:替代为@。还是比较好用的。
事件修饰符:stop:阻止事件冒泡。事件冒泡指的是点击子元素,父元素的点击事件也被触发了
prevent:阻止默认事件触发。比如a标签默认点击会跳转,这时可以阻止这个触发
capture:使用捕获模式。html默认事件从里到外进行传播,捕获模式则会从外到进行触发
self:只有当前元素能够触发,既不能通过传播的方式
once:只能触发一次
这几个修饰符可以串联修饰,例如java中的修饰符
例如给a标签:
<div>
<a href="1.jpg" @click.prevent.stop.capture.self></a>
</div>
在Vue2.0也多添加几个按键和鼠标修饰符,这样不用记一些键码。
注意一下,虽然Vue可以让组件自定义事件,但是不要使用驼峰命名法,html会将大写的字母变为小写,
可能导致出不来结果。Vue2.0好像已经不支持绑定的body上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> </head>
<body>
<div id=box>
<p>原始的方式</p>
<input type="button" value="点击一下" @click="say1" />
<hr> <p>Vue事件绑定之一 v-on:click/dblclick/...</p>
<input type="button" value="Vue事件绑定之一" v-on:click="say1">
<hr> <p>Vue事件绑定之二 @click/dblclick/...</p>
<input type="button" value="Vue事件绑定之二" @click="say1">
<hr> <p>Vue解决事件冒泡 </p>
<div @click="say1">
<input type="button" value="未解决事件冒泡" @click="say1">
</div>
<div @click="say2">
<p>原始方式解决事件冒泡 </p>
<input type="button" value="原始方式解决事件冒泡" @click="say2($event)">
</div>
<div @click="say3">
<p>Vue方式解决事件冒泡 </p>
<input type="button" value="Vue方式解决事件冒泡" @click.stop="say3()">
</div> <hr>
<p>html默认触发的事件</p>
<a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg">进入十九大</a>
<p>html $event阻止默认触发的事件</p>
<a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg" @click="say4($event)">进入十九大</a>
<p>html Vue阻止默认触发的事件</p>
<a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg" @click.prevent="say5()">进入十九大</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#box",
data:{},
methods:{
say1:function(){
console.log(this);
alert("hello v-on");
},
say2:function(ev){
alert("原始方式解决事件冒泡");
ev.cancelBubble=true; },
say3:function(){
alert("Vue方式解决事件冒泡");
},
say4:function(ev){
console.log(this);
alert("阻止默认触发事件");
ev.preventDefault();
},
say5:function(){
console.log(this);
alert("vue阻止默认触发事件");
}
}
}); </script>
</html>
03Vue事件的更多相关文章
- JNI详解---从不懂到理解
转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...
- Jquery的点击事件,三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 关于 Chrome 浏览器中 onresize 事件的 Bug
我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...
- MVVM设计模式和WPF中的实现(四)事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- C++中的事件分发
本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...
- 移动端IOS点击事件失效解决方案
解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...
- Android笔记——Button点击事件几种写法
Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...
- HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
- HTML 事件(二) 事件的注册与注销
本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...
随机推荐
- Android四大组件(详细总结)
android四大组件分别为activity.service.content provider.broadcast receiver. 一.android四大组件详解 1.activity (1)一个 ...
- Java课程设计—学生成绩管理系统(201521123005 杨雪莹)
一.团队课程设计博客链接 学生成绩管理系统 二.个人负责模块或任务说明 学生成绩录入 显示所有学生信息 显示各科平均成绩 显示学生成绩(按降序排序) 三.自己的代码提交记录截图 四.自己负责模块或任务 ...
- 201521123032 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- JAVA课程设计——单机版五子棋
JAVA课程设计--单机版五子棋 1.团队名称.团队成员介绍 团队名称:Gomoku小分队 团队成员: 网络1512 201521123038 游舒婷(组长) 网络1512 201521123043 ...
- 201521123003《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 《MySQL必知必会》[02] 多表联合查询
1.基本连接 不同类型的数据,存储在多个表中,而所谓多表连接,就是将多个表联合返回一组输出. 1.1 等值连接 基本的连接方式非常简单,只需要在WHERE子句中规定如何关联即可,如下: SELECT ...
- Maven搭建SpringMVC+MyBatis+Json项目(多模块项目)
一.开发环境 Eclipse:eclipse-jee-luna-SR1a-win32; JDK:jdk-8u121-windows-i586.exe; MySql:MySQL Server 5.5; ...
- codeigniter 去除index.php (nginx,apache) 通用方法
.htaccess文件配置 1 <IfModule mod_rewrite.c> 2 RewriteEngine On 3 RewriteBase / 4 RewriteCond $1 ! ...
- Codeforce 854 A. Fraction
A. Fraction time limit per test 1 second memory limit per test 512 megabytes input standard input ou ...
- [SDOI2009]HH的项链解题报告
原题目:洛谷P1972 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此 ...