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 ...
随机推荐
- 原生ajax实现文件上传
视图层 JS 函数: <input type="file" onchange="sendFile()" id="up" /> ...
- 字符串的格式化(转自武sir)
百分号s方式: (name) 可选,用于选择指定的key flags 可选,可供选择的值有: + 右对齐:正数前加正好,负数前加负号: - 左对齐 ...
- C实现JAVA类似ArrayList的静态链接库
文件结构: ArrayList.h:头文件 ArrayList.c:实现头文件中的功能 ArrayListTest.c:测试 ArrayList.h 头文件的基本框架: #ifndef _ARRAYL ...
- (51) magento集成增加到款通知
这篇主要讲述如何二开增加自己的功能,我没有继承方式二开,习惯是不好的,直接改了原来的模块. 达到效果就这样,当在网站支付成功,会同步到ERP系统中.下面来讲述实现过程 建立文件 payment_not ...
- Linux 环境下/etc/profile和/etc/profile.d 的区别
Linux 环境下/etc/profile和/etc/profile.d 的区别 区别: 1. 两个文件都是设置环境变量文件的,/etc/profile是永久性的环境变量,是全局变量,/etc/pro ...
- XML快速注释
eclipse中编辑java或C/C++,python文件时,注释的快捷键均为 "CTRL + / ",编辑xml文件时,该快捷键无效. eclipse XML 注释:CTRL + ...
- MATLAB曲线拟合
转自原文 MATLAB曲线拟合 曲线拟合 实例:温度曲线问题 气象部门观测到一天某些时刻的温度变化数据为: t 0 1 2 3 4 5 6 7 8 9 10 T 13 15 17 14 16 19 2 ...
- C - The C Answer (2nd Edition) - Exercise 1-12
/* Write a program that prints its input one word per line. */ #include <stdio.h> #define IN 1 ...
- Android 最火的高速开发框架xUtils
Github下载地址:https://github.com/wyouflf/xUtils xUtils简单介绍 xUtils 包括了非常多有用的Android工具. xUtils 最初源于Afinal ...
- MySQL 一台主机多实例root登录问题
假设在一台机子上起多个MySQL实例. 比方port号为 3306. 3307. 3308 登录时候要选择不同的 mysql.sock文件 mysql -uroot -p123456 这一句 登录的是 ...