事件处理

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

事件处理器的值可以是

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

内联事件处理器

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

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

方法事件处理器

<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