vue的事件
vue的事件:
vue事件简写:
vue中事件是 v-on:click=' show()' 但是我嫌弃它写太长每次都要 v-on: 事件
vue中就有事件简写 @click='show()' 这会不会就好点了呢!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<button v-on:click='show()'>按钮1</button>
<button @click='show()'>按钮2</button> //这俩种方法都可以执行点击的事件,当然所有事件都可以这样简写。
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#box',
data:{},
methods:{
show:function(){
alert(1)
}
}
});
</script>
</body>
</html>
vue的事件对象:
vue中当然也有事件对象了 , 这样@click='show($event)' 在时间函数中传$evevt 函数中接收一下,事件对象就有了。
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<button @click='show($event)'>按钮1</button>//传输事件对象
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#box',
data:{},
methods:{
show:function(ev){ //接收事件对象
alert(ev.clientX); //这个相信都知道
}
}
});
</script>
</body>
</html>
vue的事件冒泡:(大家在原生中都知道事件冒泡,当然不需要这样的时候需要阻止)。
方法一: @click='show($event)' 我们有了事件对象后,我们函数中是不是就可以利用原生中的 ev.cancelBubble=true;
方法二: @click.stop='show()' 只要在事件后面加 .stop 就可以阻止事件冒泡
vue的阻止默认事件:(元素中都有一些大家不喜欢的事件或不需要的方法)
方法一: @click='show($event)' 我们有了事件对象后,我们函数中是不是就可以利用原生中的 ev.preventDefault();
方法二: @click.prevent='show()' 只要在事件后面加 .prevent 就可以阻止默认事件。
vue的键盘事件:
@keydown='show()' 当然我们传个$event 也可以在函数中获 ev.keyCode
我要说的是键盘事件中常用键.
@keydown.enter='show()' 回车执行
@keydown.up='show()' 上键执行
@keydown.down='show()' 下键执行
@keydown.left='show()' 左键执行
@keydown.right='show()' 右键执行
以及....................
vue的事件的更多相关文章
- Vue自定义事件
前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...
- vue.js事件,属性,以及交互
这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...
- vue阻止事件冒泡和默认事件
本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- vue的事件绑定
vue事件有两方面内容:DOM事件 和 自定义事件. DOM事件 vue中采用DOM2级事件的处理方式,为IE9以上的浏览器服务.下面我们先来讲解一下什么是DOM2级事件吧! JS中DOM0级事件有两 ...
- Vue的事件修饰符
转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...
- 解决vue 绑定事件会覆盖默认参数的问题
解决vue 绑定事件会覆盖默认参数的问题 在使用一些ui框架的时候,某些组件的框架中的事件所规定的参数不能满足实际开发的需要,但是直接传入参数会把默认的参数覆盖掉 解决方法:将参数放入箭头函数中,传递 ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
- vue click事件 v-on:click
v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
随机推荐
- 数据库开发基础-★SQl Server 控制数据库的服务+数据库的创建与管理(增删改查)★
控制数据库的服务: 方法一: 1.Windows+R 打开运行 打开cmd 2.输入net start MSSQLserver 启动数据库服务 输入net stop MSSQLserver 关闭数据 ...
- jquery选项卡效果
效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- linux系统管理(1)之 内核编译选项查看
三个方法 proc文件系统 ubunut debain 红帽等 proc文件系统 /proc/config.gz This file shows you the compile-time config ...
- 2.阿里实人认证 .net 准备工作2 转换demo
1.引入阿里的SDK 2. 搬一下java 的代码 DefaultProfile profile = DefaultProfile.GetProfile( "cn-hangzhou" ...
- linux忘记root密码怎么办
如何找回root密码,如果我们不小心,忘记root密码,怎么找回? 思路:进入到单用户模式,然后修改root密码.因为进入单用户模式,root不需要密码就可以登录. 详细过程: 1.打开虚拟机 2.开 ...
- Java中的RSA加解密工具类:RSAUtils
本人手写已测试,大家可以参考使用 package com.mirana.frame.utils.encrypt; import com.mirana.frame.utils.log.LogUtils; ...
- Python处理文件和查漏
import os,re def change_filename(root): ''' 批量修改excel文件名 ''' for root_,_, fs in os.walk(root): for f ...
- UCF约束介绍
约束 (一)约束的分类: 利用FPGA进行系统设计常用的约束主要分为3类. (1)时序约束:主要用于规范设计的时序行为,表达设计者期望满足的时序条件,知道综合和布局布线阶段的优化算法等. (2)布局布 ...
- DP Intro - poj 2342 Anniversary party
今天开始做老师给的专辑,打开DP专辑 A题 Rebuilding Roads 直接不会了,发现是树形DP,百度了下了该题,看了老半天看不懂,想死的冲动都有了~~~~ 最后百度了下,树形DP入门,找到了 ...
- python -ConfigParser模块讲解
configParser 模块用于操作配置文件 注:Parser汉译为“解析”之意. 配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键= ...