事件修饰符
Vue中的事件修饰符：
1、prevent:阻止默认事件；
2、stop:阻止事件冒泡；
3、once：事件只触发一次；
4、capture：使用事件的捕获模式；
5、self：只有event.target是当前操作的元素时才触发事件；（只有和当前事件触发的标签一致时才会触发）
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
prevent:阻止默认事件
点完之后不会发生默认事件
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="root">
<!-- .prevent阻止默认行为-->
<a :href="url" @click.prevent="show">点击去百度</a>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
url:"http://baidu.com"
}
}
</script> 点完超链接不会发生跳转，因为prevent阻止了a标签的默认事件（跳转）
stop:阻止事件冒泡
div和button都有show事件，当点击按钮时，button会触发show，执行完成后，冒泡到外层，div的show也会触发，加上了stop,阻止了button的冒泡，所以div不会触发show事件。
<!-- .stop阻止事件冒泡-->
<div @click="show">
<button @click.stop="show">小按钮</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
methods:{
show(e){
console.log(e.target)
alert("hello")
}
}
<script> once：事件只触发一次
默认是点一次触发一次事件，但是加上了once后只会触发一次，（页面加载完后点击n次只触发第一次）
<div id="root">
<!-- .once只执行一次-->
<button @click.once="show">一次按钮</button>
<div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
url:"http://baidu.com"
},
methods:{
show(e){
console.log(e.target)
alert("hello")
}
}
</script> capture：使用事件的捕获模式
<head>
<meta charset="UTF-8">
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<style>
*{
margin-top: 5px;
}
.div1{
padding: 5px;
background-color: deepskyblue;
}
.div2{
padding: 5px;
background-color: orange;
}
</style>
</head>
<div id="root">
<!-- .capture 使用捕获模式，捕获是从外向内，冒泡是从内向外-->
<div class="div1" @click.capture="div1">
div1
<div class="div2" @click="div2">
div2
</div >
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
methods:{
div1(){
console.log(1)
},
div2(){
console.log(2)
}
</script>
正常情况下是先进行事件的捕获，这个过程是有外到内的，捕获完成后，该事件触发，在冒泡到外层。
没加capture时，点击div2,会打印出2 1，这个是冒泡产生的结果
加上capture后
self:与当前事件一致时触发
.self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发
冒泡冒上去的还是button对象，而不会变成div
<div id="root">
<!-- .self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发-->
<!-- 冒泡冒上去的还是button对象，而不会变成div-->
<div @click.self="show">
<button @click="show">self按钮</button>
</div>
</div> 上面的加上.self，show事件只会触发一次，层的div不会被触发。
passive：事件的默认行为立即执行
passive立即执行，不会等到回调函数执行完毕才执行，默认情况是回调函数执行完后才会执行事件的行为。
<style>
ul{
background-color: gold;
height: 200px;
width: 200px;
/*位置不够时，自动滚动*/
overflow: auto;
}
li{
height: 100px;
width:100px;
}
</style>
<div id="root">
<!--scroll只要发生了滑动就会执行，滚条鼠标和上下键 当到达底部继续滑动不会继续执行-->
<!-- wheel属性 只有当鼠标滑动才会执行 当到达底部继续滑动鼠标还会继续执行-->
<!-- .passive无须等待回调函数执行完毕，立即执行这个属性，这里为滑动，则立即滑动-->
<ul @wheel.passive="flow">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
url:"http://baidu.com"
},
methods:{
flow(){
for( i=0;i<10000;i++) {
console.log("滑动..")
}
}
}
}); scroll只要发生了滑动就会执行，滚条鼠标和上下键 当到达底部继续滑动不会继续执行
wheel属性 只有当鼠标滑动才会执行 当到达底部继续滑动鼠标还会继续执行
.passive无须等待回调函数执行完毕，立即执行这个属性，这里为滑动，则立即滑动
单独的scroll也有passive效果
键盘事件
Vue中常见的按键别名：
回车--enter
删除--delete(捕获删除和退格键)
退出---esc
空格--space
换行--tab
上--up
下--down
左--left
右--right - Vue未提供的别名按键，可以使用按键原始的值去绑定，但注意要为kebab-case(短线命名，如大小写切换的按键CapsLock,要绑定就为caps-lock)
- 系统修饰键(用法特殊):ctrl、alt、shift、meta(win键)
- 配合keyup使用时：按下这个修饰键的同时，在按下其他键，随后释放其他键，事件才别触发配合keydown使用时:按下即生效，正常触发事件
- 也可以使用keyCode指定具体的按键(如:@keydown.13="xxx")，但是不推荐，因为有些键盘的keyCode值不一值
- Vue.config.keyCodes.自定义键名=键码
<div id="root">
<input type="text" placeholder="输入并回车" @keydown.kc="kdown" >
</div>
<script type="text/javascript">
Vue.config.keyCodes.kc=13//给回车定义了一个别名kc 事件总结
可以在一个绑定事件中设置多个属性，如： <button @click.stop.prevent="show">小按钮</button>