事件处理
(1) 监听事件-直接触发代码
在vue中还有v-on来为dom绑定事件,在v-on:后面加上要绑定的事件类型,值里可以执行一些简单javascript表达式:++ – = …
可以将一些方法设置在methods里,这样就可以在v-on:click的值里直接写方法名字可以,默认会在方法中传入事件对象,当写方法的时候加了()就可以传参,这个时候如果需要事件对象,那就主动传入$event
v-on绑定的事件可以是任意事件,v-on:可以缩写为@ v-on:click ===> @click
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
- 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
(2) 方法事件处理器-写函数名 handleClick
<div v-on:click="clickme($event,1,2)">点我</div>
<script>
new Vue({
methods:{
clickme(e,a,b){
console.log(e事件对象,1,2)
}
}
})
</script>
(3) 内联处理器方法-执行函数表达式
handleClick($event) $event 事件对象
(4) 事件修饰符
.stop
.prevent
.self
.once
(5) 按键修饰符
@keyup.enter