VUE3.0-事件处理

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

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

内联事件处理器通常用于简单场景

<template>
    <h3>内联事件处理器</h3>
    <button v-on:click="count++">Add</button>
    <p>{{ count }}</p>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        }
    },
}
</script>

这样每点击一次Add按钮数字就会相应的加1

方法事件处理器
 

<template>
    <h3>方法事件处理器</h3>
    <button @click="addCount">Add</button>
    <p>{{ count }}</p>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    methods:{
        addCount() {
            //读取到data里面的数据方案，this.count
            this.count++;
        }
    }
    
}
</script>