vue事件处理v-on或@

事件处理v-on或@

我们可以使用v-on指令（简写@）来监听DOM事件，并在事件触发时执行对应的Javascript。用法：v-on:click="methodName"或@click="hander"
事件处理器的值可以是：

1. 内敛事件处理器：事件被触发时执行的内敛JavaScript语句（与onclick相似）
2. 方法事件处理器：一个指向组件定义的方法的属性名或是路径

内敛事件处理器
简单场景：了解即可

<template>
<button
 @click="count++">点击</button>
 <p>count is: {{ count }}</p>
</template>
<script>

export default{
    data(){
        return{
      count:0,
        }
    }
}

</script>

运行结果：


方法事件处理器
简单场景：常用处理器

<template>
<button
 @click="addCount">点击</button>
 <p>count is: {{ count }}</p>
</template>
<script>

export default{
    data(){
        return{
      count:0,
        }
    },
    methods: {
        addCount() {
             this.count++
    }
}
}

</script>

运行结果：

该处理器是通过函数实现。