<body>
<div id="root">
<button @click="showInfo(66,$event)">点我传参</button>
</div>
</body>
<script>
let vm = new Vue({
el: "#root",
data:{
name:"aiguigu"
},
methods: {
showInfo(number, event) {
console.log(number)
console.log(event)
}
}
})
</script>
methods中配置的函数不要用=>，否则this就不是vm了(window),
@click = "demo" 和 @click=“demo($event)”效果一样，但后者可以传参
showInfo也会在vm中，但是和data中的属性不同,methods不做数据代理（但是是可以把函数写在data中，只是会做数据代理，效率很低）
事件修饰符
修饰符可以连起来写@click.prevent.stop
阻止默认行为
e.preventDefault();
Vue中
<a href="www.baidu.com" @click.prevent="showInfo">点我</a>
@click.prevent
<body>
<div id="root">
<a href="www.baidu.com" @click="showInfo">点我</a>
</div>
</body>
<script>
let vm = new Vue({
el: "#root",
methods: {
showInfo(e) {
e.preventDefault();
alert("hola")
}
}
})
</script>
阻止事件冒泡
e.stopPropagation();
Vue中 @click.stop
<body>
<div id="root">
<div @click="showInfo">
<button @click.stop="showInfo">点击</button>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#root",
methods: {
showInfo(e) {
alert("hola")
}
}
})
</script>
事件只触发一次
<button @click.once="showInfo">点击</button>
使用事件的捕获模式.capture
只有event.target是当前操作的元素是才触发事件.self
时间的默认行为立即执行，无需等待事件回调执行完毕.passive：如果是有默认行为的事件，正常情况下是先执行回调函数，执行完后再执行默认事件；但是优势回调函数很复杂，就用这个（不咋用，移动端用的多）
键盘事件
<body>
<div id="root">
<input type="text" @keyup="showInfo">
</div>
</body>
<script>
let vm = new Vue({
el: "#root",
methods: {
showInfo(e) {
console.log(e.target.value);
}
}
})
</script>
加一个按键判断（按下回车才执行）
1、e.keycode判断
2、常用键Vue别名：@keyup.enter="showInfo"
enter、delete(删除或退格)、esc、space、up、down、tab(keydown)、left、right
3、按键名e.key，不常见
4、Vue.config.keyCodes.自定义键名 = 键码
data中的任何数据发生变化时，vue都会重新解析一边模板
