一、事件的基本使用
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的基本使用</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>welcome to {{demo}}</h2>
<button @click="showInfo">百度</button>
<!-- 如果需要传其他参数时，防止事件对象丢失，需要用$event来占位 -->
<!-- 且加上括号不传参时，如果不用$event占位时事件对象也会丢失 -->
<button @click="showMsg($event,66)">传参</button>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
demo:'baidu'
},
methods: {
// 默认可传参，传的参数是事件对象
// event.target表示的是事件目标，也就是元素本身
showInfo(event){
console.log(event)
console.log(this)//此处的this是Vue实例对象vm
},
showMsg(event,num){
console.log(event,num)
}
},
})
</script>
</body>
</html>
二、常用的事件类型
1.鼠标事件（点击事件）
click：鼠标左键单击
dbclick：鼠标左键双击
contextmenu：鼠标右键单击
mousewheel：滚轮滚动事件
mousedown：鼠标按下
mouseup：鼠标抬起
mousemove：鼠标移动
mouseover：鼠标移入
mouseout：鼠标移出
mouseenter：鼠标移入
mouseleave：鼠标移出
2.键盘事件
keydown ：键盘按下
keyup：键盘抬起
keypress：键盘按下（你按下的键必须可以是在文本框里面输入东西的键，比如26个英文字母键就可以，像shift键就不行）
3. 浏览器事件
load：页面加载完毕
scroll：滚动
resize：窗口尺寸改变
offline：网络断开
online：网络恢复
hashchange：hash值改变的时候
4. 表单事件
change：表单内容改变（改变指的是失焦与聚焦的时候表单内容不一样）
input：表单输入事件
focus：表单聚焦事件
blur：表单失焦事件
submit：表单提交事件
reset：表单重置事件
三、Vue中的事件修饰符
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
修饰符可以连续写
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修饰符</title>
<script src="../js/vue.js"></script>
<link rel="stylesheet" href="../css/事件修饰符.css">
</head>
<body>
<div id="root">
<h1>hello {{name}}</h1>
<!-- prevent：阻止默认事件（常用）； -->
<a href="http://www.baidu.com" @click.prevent="showInfo">百度</a>
<!-- stop：阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- once：事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!-- capture：使用事件的捕获模式 -->
<!-- 先捕获再冒泡，捕获是由外到内，冒泡是由内到外 -->
<div class="demo2" @click.capture="showMsg(2)">
div1
<div class="demo3" @click="showMsg(3)">
div2
</div>
</div>
<!-- self：只有event.target是当前操作的元素时才触发事件 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
const vm = new Vue({
el:'#root',
data() {
return {
name:'world'
}
},
methods: {
showInfo(e){
alert('hello world')
},
showMsg(msg){
console.log(msg)
},
demo(){
for(let i=0;i<100000;i++){
console.log('$')
}
}
},
})
</script>
</body>
</html>
四、Vue中键盘事件的使用
1.Vue中常用的按键别名：别名是Vue给我们取的，键盘上面回车键的原始名是Enter，但是Vue给Enter键取了个别名叫enter，所以我们用Enter和enter是一样的（即Vue取别名的按键用原始名和别名是一样的）。但是切记，Vue取别名的键只有下面几种，那么未被Vue取别名的键只能用键盘的原始名，也就是下面第二点用到的key值。注意键盘上的标识有可能和按键的原始值是一样的，比如回车键，原始值和键盘上的标识都是Enter，但是键盘标识不一定就是原始值（比如Ctrl键，它的原始值是Control），我们代码写的是键盘原始值。
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）。通俗一点就是你在控制台输出的key值就是你按键的原始名，原始名由多个单词组成的要写成kebab-case的形式。再次强调键盘上按键标识不一定是按键的原始值，比如Ctrl键，键盘上面是缩写，它的原始key值是Control（代码中写的是原始值Control，而不是键盘上的Ctrl）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">
</div>
<script>
new Vue({
el:'#root',
data() {
return {
}
},
methods: {
showInfo(e){
//比如你点击的是CapsLock键，那么控制台输出的原始key值就是CapsLock
//但是CapsLock是多个单词组成，要写成caps-lock,如上所示
//下面的输出只是让程序员了解键盘的原始值是啥，这里应该要写的是事件的逻辑
//console.log(e.key)
//点击CapsLock键之后触发事件输出下面的值
console.log(e.target.value)
}
},
})
</script>
</body>
</html>
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）
注意：这几个单词是可以直接使用的，用法如下
1、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
2、配合keydown使用：立即触发事件,不用配合其他按键即可触发事件。
<input type="text" placeholder="按下回车提示输入" @keydown.ctrl="showInfo">
4.也可以使用keyCode（按键编码简称键码）去指定具体的按键（不推荐）,因为每个键盘的按键编码不一样，所以官网上面说有的浏览器已经不能使用了，所以尽量别用这种方式。
5.也可以自定义键名：Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
//F8键的键码是119，但是我们给它取的别名是demo，所以代码中写的是@keyup.demo，当你按下F8键时触发事件
Vue.config.keyCodes.demo = 119
<input type="text" placeholder="按下回车提示输入" @keyup.demo="showInfo">
