参考官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
七、事件处理
1、监听事件
我们可以使用 v-on
指令 (简写为 @
) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click="methodName"
或 @click="handler"
。
事件处理器的值可以是:
内联事件处理器:事件被触发时执行的内联 JavaScript 语句 (与 onclick
类似)。
方法事件处理器:一个指向组件上定义的方法的属性名或是路径。
2、内联事件处理器
内联事件处理器通常用于简单场景,例如:
data(){
return{
counter:0
}
}
<!-- 点击‘counter’内容,点一次,数字就+1 -->
<h2 @click="counter++">{
{counter}}</h2>
3、方法事件处理器
随着事件处理器的逻辑变得愈发复杂,内联代码方式变得不够灵活。因此 v-on
也可以接受一个方法名或对某个方法的调用。例如:
data(){
return{
counter:0
}
},
methods:{
addCounter(){ //用number进行接收
this.counter ++
}
<!-- 绑定事件:没有传递参数 -->
<h2 @click="addCounter">{
{counter}}</h2>
4、在内联处理器中调用方法
除了直接绑定方法名,还可以在内联事件处理器中调用方法。例如:
data(){
return{
counter:0