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. ...
随机推荐
- 201521123098 JAVA课程设计
1.团队课程设计博客链接 http://www.cnblogs.com/agts/p/7067948.html 2.个人负责模块或任务说明 个人任务:实现初始界面中的登录.注册模块,以及数据库的连接和 ...
- 201521123102 《Java程序设计》第11周学习总结
1. 本周学习总结 2.书面作业 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问)## 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步 ...
- Eclipse rap 富客户端开发总结(12) :Rap 优化之组件的销毁
一.概述 经过几个月的rap 项目实战,总结了一些小经验,在这里总结一下,希望对大家有所帮助. 二.销毁的处理 相信学习rap 的同学都知道,swt 中提供了许多的组件,像lab ...
- Visual studio code快捷键
{"key": "escape", "command": "cancelSelection", "when&q ...
- Spring-java-模板设计模式
1,模板设计模式指的是将相应的模板方法提取出来在专门的位置定义,然后把相同调用过程操作,通过模板来实现对于模板设计模式而言,一般有两种实现方式 1)基于继承的实现 2)基于组合的实现 Spring的J ...
- XML功能
REF:https://www.baidu.com/link?url=_-UY8rZVAORlesKTth0F7C8LbvXCL4lSwz6vmQVnTEgmT06NFGdoaD9FbuEQhR7xG ...
- Mybatis——choose, when, otherwise可以达到switch case效果
在mapping文件中实现动态sql,如果想达到if else的效果可以使用:choose, when, otherwise <choose> <when test="ti ...
- [python学习笔记] String格式化
格式化 S % (args...) 方式 特点 str里的占位符同java里的占位符. 优势 这种方式可以限定格式化的时候接受的数据类型. 常见占位符 %d 接收数字,格式化为 十进制 %x 接收数字 ...
- WebSocket部署服务器外网无法连接解决方案
首先要说的是我遇见的问题: WebSocket connection to 'ws://www.xxxx.com/xxx/xx' failed: Error during WebSocket hand ...
- 优秀的CSS预处理----Less
Less语法整理 本人邮箱:kk306484328@163.com,欢迎交流讨论. 欢迎转载,转载请注明网址:http://www.cnblogs.com/kk-here/p/7601058.html ...