事件处理

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

事件处理器的值可以是

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

内联事件处理器

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

xxxxxxxxxx
<template>
    <button @click="count++">Add 1</button>
    <p>Count is: {{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count:0
        }
    }
}
</script>

方法事件处理器

xxxxxxxxxx
<template>
    <button @click="addCount">Add</button>
    <p>Count is: {{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count:0
        }
    },
    // 所有的方法或者函数都放在这里
    methods:{
        addCount(){
            this.count+=1
        }
    }
}
</script>

实时效果反馈

1. 在Vue中，下列添加事件方法正确的是：

A onClick

B :click

C @click

D click

答案

1=>C