v-on
事件的基本使用：
1.v-on:xxx或@xxx，绑定事件，xxx是事件名（如v-on:click以及@click）
2.事件需要配置在methods对象中，并且相应的函数在vm里，而且this也就是vm。
3.methods里面的函数不能用箭头函数（前面也有讲过，箭头函数没有this），这样this就会向上找到windows
4.@click=“demo($event, xx)”
其中$event为点击事件（如果不传$event，会导致在传其他参数（xx）的时候，将event覆盖掉，函数就没办法使用相应的事件函数了（如event.target）），如果不想传参数，则不加括号及内容即可，如@click=“demo”
<div id="btnDemo">
<button @click="clickFun1">点击我有惊喜</button>
<button @click="clickFun2($event, 8)">点击我有惊喜</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#btnDemo',
methods: {
clickFun1() {
alert("事件1点击");
},
clickFun2(event, number) {
alert("我今天" + number + "岁了！");
console.log(event.target);
}
}
})
</script>
这里的函数按理说也可以放在data，可以正常显示，但是因为data会有数据代理，而函数是不需要数据代理的（函数一定义完一般不更改，也就不需要数据代理了），放进去会导致让vm实例做更多无用功。
如下，函数一放进了data。
data: {
clickFun1() {
alert("事件1点击");
}
},
计数器练习
计数器
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add: function() {
this.counter++;
console.log("加法执行")
},
sub: function() {
this.counter--;
console.log("减法执行")
}
}
})
</script>
事件修饰符
常用
1.@xxx.prevent就可以阻止默认行为，如a标签跳转（对应event.preventDefault）
2.@xxx.stop就可以阻止事件冒泡，如子标签点击冒泡到祖父节点的点击事件，当然前提是有点击事件。（对应event.stopPropagation，注意cancelBubble 不符合w3c标准，只适用于IE浏览器，现在的IE基本被弃用了。。）
3.@xxx.once就可以使事件只触发一次，如只能点击一次后再也不能点了。
（对应
document.getElementById('xxx').addEventListener('click',function{
xxx;
},{once: true})
，或者是在执行完点击事件后消除点击事件）
其他
4.@xxx.capture就可以实现事件捕获（注意是在最外面加上.capture），意味着从外到内（冒泡是从内到外）
（我们知道只有在
element.addEventListener(event, function, useCapture)
里面的useCapture设置为true的时候才会事件捕获）
5.@xxx.self就可以实现只当event.target为自己的时候才执行事件。
一般来说，就算是冒泡，外面的div的event.target也是最先的点击事件的元素，因此加上self的话就能阻止这种情况的冒泡
<div id="btnDemo" @click="clickFun1">
<button @click="clickFun1">点击我有惊喜</button>
//加了.self后，冒泡行为被阻止
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#btnDemo',
methods: {
clickFun1(event) {
console.log(event.target);
alert("事件1点击");
},
}
})
console.log(vm);
</script>
6.@xxx.passive直接执行默认行为。这涉及到拓展知识，当滚轮滚动的时候，默认先执行绑定的相应事件后才执行默认行为（滚动条滚动），这个修饰符就是让事件先执行（如滚动条先滚动再执行事件，即使在执行事件进行下一次点击也会以下一次事件的默认行为为先，即默认行为为最高优先级）。
拓展
1.滚动条相关
@scroll和@wheel
@scroll是针对滚动条的，@wheel是针对鼠标滚轮的
2.事件修饰符可以链式，如@click.stop.prevent（同时有阻止冒泡和阻止默认行为）（顺序没有要求，即也可以是@click.prevent.stop，但是并非一样，而是最先写在前面的先，如这个是先阻止默认行为再阻止冒泡）
<div id="btnDemo" @click="clickFun1">
//同时阻止冒泡和默认行为
<a href="http://www.baidu.com" @click.prevent.stop="clickFun1">点击我有惊喜</a>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#btnDemo',
methods: {
clickFun1(event) {
console.log(event.target);
alert("事件1点击");
},
}
})
console.log(vm);
</script>
键盘事件
Vue常见的按键别名
1.enter（回车）
2.delete（删除）
3.esc（退出）
4.space（空格）
5.tab（换行）（这个比较特殊，不适合用keyup，因为tab本身就会切换焦点，等到keyup之前，焦点就已经改变了，从而执行不了相应的方法，适合用keydown，因为一按下就开始执行了，当然焦点依然会改变）
6.up、down、left、right（上下左右）
7.其他按键的话，有些不能绑定，可以绑定的如caps lock（大小写切换），在使用的时候应该用横杠分开并且为小写，如@keyup.caps-lock
系统修饰键
这类用法比较特殊，有ctrl、shift、alt、meta（win键）
1.keyup。需要按下ctrl的同时按下其他键，然后释放那个键，才可以执行相应的事件。（注意，有些键是有功能的，最好选没功能的键，如y和i键，也就是先ctrl+y(i)，然后放开y(i)键。另外，如果只想要某个键，比如ctrl + y，可以在后面加相应的键，如@keyup.ctrl.y，这样的话就只有为y键才执行事件了。）
2.keydown正常执行。
注意：
1.每个键都有自己的keycode，但是直接用keycode不被推荐，如@keyup.13（13就是enter键的keycode）
为什么会废弃呢？因为可能不同电脑的同一个按键的keycode不一样，所以直接用按键名就不存在不统一的问题了。
2.也可以自己定义别名，就是在<script>里写入Vue.config.keyCodes.xxx = kk(如Vue.config.keyCodes.newEnter = 13），但是事实上也是用的keycode，所以不推荐，而且常用的已经够用了。
代码
<div id="test">
<h1>{{chapter}}</h1>
enter
<input type="text" @keyup.enter="infoFun"><br>
tab
<input type="text" @keydown.tab="infoFun"><br>
ctrl1
<input type="text" @keyup.ctrl="infoFun"><br>
ctrl2
<input type="text" @keydown.ctrl="infoFun">
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#test',
data:{
chapter: '键盘事件'
},
methods: {
infoFun(event) {
console.log(event.target.value);
}
}
})
</script>
