vue3事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{},
methods:{
show:function(ev,b){
alert(ev.clientX);
alert(b);
}
show2:function(){
alert(2);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="show($event,12)">
<input type="button" value="按钮" @click="show()">
<!-- v-on:click="show()"简写 -->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(1);
ev.cancelBubble=true;//阻止冒泡
},
show2:function(){
alert(2);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<div @click="show2()"> //冒泡
<input type="button" value="按钮" @click="show($event)">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert(1);
},
show2:function(){
alert(2);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show()"> 简写方式，阻止冒泡，
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(1);
ev.preventDefault();//阻止右键菜单出来
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu="show($event)"> //contextmenu右键点击
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu.prevent="show()"> //阻止右键的默认行为
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(ev.keyCode);
if(ev.keyCode==13){
alert('您按回车了');
}
}
show1:function(){
alert('您按回车了');
}
show2:function(){
alert('您按回车了');
}
show3:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keydown="show">
<input type="text" @keydown="show($event)">
<input type="text" @keyup="show($event)">
<input type="text" @keyup.13="show1()">
<input type="text" @keyup.enter="show2()">
<input type="text" @keyup.left="show3()">
<input type="text" @keyup.up="show3()">
</div>
</body>
</html>
vue3事件的更多相关文章
- Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务
前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...
- JNI详解---从不懂到理解
转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...
- VUE3 之 click 事件
1. 概述 老话说的好:努力帮别人解决难题,你的难题也就不难解决了. 言归正传,今天我们来聊聊 VUE3 的 click 事件的相关知识. 2. click 事件 2.1 实现数字递减 <bod ...
- VUE3 之 键盘事件
1. 概述 老话说的好:宁愿自己吃亏,也不让他人吃亏. 言归正传,今天我们来聊聊 VUE3 的 键盘事件. 2. 键盘事件 2.1 敲击任意键触发事件 <body> <div id= ...
- Vue3手册译稿 - 深入组件 - 自定义事件
本章节需要掌握组件基础 emit我译成发射,觉得发射这个词比较形象的形容将子组件事件发射出来的一个动作. 事件名 像组件和props,事件名也会进行自动转换,如果你在子组件里发射一个驼峰命名的事件,你 ...
- vue3 - 事件处理之事件修饰符
内容取自>> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- ...
- 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
随机推荐
- django 获得请求头
django 获得到的请求头封装在 request 的 META 中,为一个 dict 以下选自官方文档: https://docs.djangoproject.com/zh-hans/2.0/ref ...
- 不要在.h文件中定义变量
今天在头文件.h中初始化了一个数组和函数,在编译的时候提示这个数组和函数重新定义了,检查后发现,犯了一个致命的错误,在头文件中定义变量... 以下引用别人的一篇说明,警示自己. C语言作为一种结构化的 ...
- SCN 时间戳的相互转换
SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...
- Cube Simulation zoj3429 模拟
Description Here's a cube whose size of its 3 dimensions are all infinite. Meanwhile, there're 6 pro ...
- poj 2154 Color（polya计数 + 欧拉函数优化）
http://poj.org/problem?id=2154 大致题意:由n个珠子,n种颜色,组成一个项链.要求不同的项链数目.旋转后一样的属于同一种.结果模p. n个珠子应该有n种旋转置换.每种置换 ...
- iOS开发实践之GET和POST请求
GET和POST请求是HTTP请求方式中最最为常见的. 在说请求方式之前先熟悉HTTP的通信过程: 请求 1.请求行 : 请求方法.请求路径.HTTP协议的版本号 GET /MJServer/reso ...
- Clion远程开发
2018.3 开始Clion可以支持远程开发了 官网教程如下: https://www.jetbrains.com/help/clion/remote-projects-support.html ...
- 线程1—Thread
随便选择两个城市作为预选旅游目标.实现两个独立的线程分别显示10次城市名,每次显示后休眠一段随机时间(1000ms以内),哪个先显示完毕,就决定去哪个城市.分别用Runnable接口和Thread类实 ...
- ajax无刷新翻页后，jquery失效问题的解决
例如 $(".entry-title a").click(function () { 只对第一页有效, 修改为 $(document).on('click', ".e ...
- jquery一些总结
今天用jquery写一个js的效果,总结了几个方法. 获取jquery对象的css样式属性:css()方法,还可以更改其css样式:$(this).css('display') ;$(this).cs ...