（1）事件处理

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

事件处理器的值可以是:

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

1. 内联事件处理器（少用）

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

<script>
export default{
    data(){
        return {
            count: 0
        }
    },
    }
</script>
<template>
<h3>内联事件处理</h3>
<button on:@click="count++">Add</button>
<p>{{ count }}</p>
</template>

我们点击按钮的时候，会累计增加

2. 方法事件处理器（常用）

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

    // 所有的方法或者事件，都放在这里
    methods:{
            addCount(){
                // 读取到data里的数据方案：this.count
                this.count++
            }
        }
    }
</script>
<template>
<h3>内联事件处理</h3>
<button @click="addCount">Add</button>
<p>{{ count }}</p>
</template>