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>

运行结果：

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