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 ...
随机推荐
- C#打开或者创建一个文件，然后向其末尾写入数据的方法
原文:C#打开或者创建一个文件,然后向其末尾写入数据的方法 FileStream fs = new FileStream(@"d:\timetick.txt" ...
- 【BZOJ 1483】[HNOI2009]梦幻布丁
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 链表,启发式合并. 把x变成y,和y全都变成x. 不论是前者还是后者.连续段的个数都是相同的,不影响结果. 那么我们把x,y中出现次 ...
- 【BZOJ 1452】 [JSOI2009]Count
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 维护一百个二维树状数组. 二维区间求和. [代码] #include <bits/stdc++.h> #define L ...
- server问题排查经常使用命令
1.top 查看系统负载情况,load average CPU使用情况,按1查看每一个CPU的使用情况 shift+h 查看每一个线程的情况 2.free -m 按兆为单位输出内存的已用,未用. ...
- Android之输入内容监听回车键【Editor】
2.输入内容时按下回车键时监听 username.setOnEditorActionListener(new OnEditorActionListener() { @Override public b ...
- 4.C语言文件操作
总论 1.fopen r以只读方式打开文件,该文件必须存在 r+以可读写方式打开文件,文件必须存在 rb+读写打开一个二进制文件,允许读写数据,文件必须存在 rw+读写打开一个文本文件,允许读和写 w ...
- 基于opencv的手写数字字符识别
摘要 本程序主要参照论文,<基于OpenCV的脱机手写字符识别技术>实现了,对于手写阿拉伯数字的识别工作.识别工作分为三大步骤:预处理,特征提取,分类识别.预处理过程主要找到图像的ROI部 ...
- WebView的坑[持续更新]
返回错误的 innerHeight,如 240(WebView returns bad window.innerHeight) http://stackoverflow.com/questions/1 ...
- 基于JS的身份证验证（完整版）
var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0 ...
- 机器学习(四) 机器学习(四) 分类算法--K近邻算法 KNN (下)
六.网格搜索与 K 邻近算法中更多的超参数 七.数据归一化 Feature Scaling 解决方案:将所有的数据映射到同一尺度 八.scikit-learn 中的 Scaler preprocess ...