【vue3入门】-【8】事件处理

事件处理

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

事件处理器的值可以是：

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

• 内联事件处理器

<template>
    <h3>事件处理器</h3>
    <button v-on:click="count++">add</button>
    <button @click="count++">@add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0
        }
    }
}
</script>

• 方法事件处理器

<template>
    <h3>事件处理器</h3>
	<!--内联事件处理-->
    <button v-on:click="count++">add</button>
    <button @click="count++">@add</button>
	<!--方法事件处理-->
    <button @click="addCount">func-add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    // 所有的方法或者函数都放在这里，和data同级
    methods: {
        addCount() {
            this.count += 1 // 读取到data里面的数据方案：this.count
        }
    }
}
</script>