标签：事件处理 Vue methods 温开水 修饰符 事件 提示信息 使用 复习
前言
这次的笔记比较杂
一、Vue中事件的基本使用
（一）回顾原生JavaScript中的事件使用
三要素
获取事件源（哪个对象被触发）
绑定事件，事件类型（怎么触发，点击还是键盘输入等等）
添加事件处理程序（要运行什么）这样使用事件比较复杂，待会儿看看Vue的事件使用。
https://blog.csdn.net/qq_47286790/article/details/122761706?spm=1001.2014.3001.5501<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的基本使用</title>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<button id="btn">点我提示信息</button>
</div>
</body>
<script>
//一、获取事件源
let btn = document.getElementById('btn');
//二、绑定事件
console.log(btn);
btn.onclick = function(){
alert('我的名字叫温开水');//三、添加事件处理代码
}
</script>
</html>（二）Vue中的事件使用
主要是 v-on:click="shoeInfo" 和 配置项methods
修饰符可以连续写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的基本使用</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>我的名字叫{{name}}</h2>
<button v-on:click="showInfo">点我提示信息</button>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'温开水'
},
methods:{
showInfo(){
alert("你好啊!");
}
}
})
</script>
</html>事件的基本使用
1）使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
2）事件的回调需要配置在methods对象中，最终会在vm上；
3）methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
5）@click="demo"和@click="demo($event)" 效果一致， 但后者可以传参；
二、Vue中的事件修饰符
Vue中的事件修饰符
1）prevent：阻止默认事件(常用)
2）stop： 阻止事件冒泡(常用)
3）once：事件只触发一次(常用)
4）capture：使用事件的捕获模式
5）self：只有event.target是当前操作的元素时才触发事件
6）passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: pink;
}
.box1{
padding: 5px;
background-color: pink;
}
.box2{
padding: 5px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>我的名字叫{{name}}</h2>
<!-- 阻止默认事件的发生 -->
<a href="https://blog.csdn.net" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡 -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- 事件只触发一次 -->
<button @click.once="showInfo">点我提示信息</button>
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'温开水'
},
methods:{
showInfo(e){
alert("你好啊!");
},
showMsg(num){
alert(num);
}
}
})
</script>
</html>三、Vue键盘事件
（1）Vue中常用的按健别名
回车=> enter
删除=> delete ( 捕获删除”和“退格"键)
退出=> esc
空格=> space
换行=> tab（特殊，必须配合keydown使用）
上=>up
下=>down
左=> left
右=> right
（2）Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
（3）系统修饰键(用法特殊) : ctrl、 alt、 shift、 meta
①配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
②配合keydown使用：正常触发事件。
（4）也可以使用keyCode去指定具体的按键(不推荐)
（5）Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名（不推荐）
标签：事件处理,Vue,methods,温开水,修饰符,事件,提示信息,使用,复习 来源： https://blog.csdn.net/qq_47286790/article/details/122761678
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。