前言
这次的笔记比较杂
一、Vue中事件的基本使用
（一）回顾原生JavaScript中的事件使用
三要素
获取事件源（哪个对象被触发）
绑定事件，事件类型（怎么触发，点击还是键盘输入等等）
添加事件处理程序（要运行什么）这样使用事件比较复杂，待会儿看看Vue的事件使用。
<!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.自定义键名=键码，可以去定制按键别名（不推荐）