教程：第 4 步

Vue教程

教程：第 4 步

事件监听 {#event-listeners}

我们可以使用 v-on 指令监听 DOM 事件：

vue-html 复制代码

<button v-on:click="increment">{{ count }}</button>

因为其经常使用，v-on 也有一个简写语法：

vue-html 复制代码

<button @click="increment">{{ count }}</button>

此处，increment 引用了一个使用 methods 选项声明的函数：

js{7-12} 复制代码

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      // 更新组件状态
      this.count++
    }
  }
}

js{7-12} 复制代码

createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      // 更新组件状态
      this.count++
    }
  }
})

在方法中，我们可以使用 this 来访问组件实例。组件实例会暴露 data 中声明的数据属性。我们可以通过改变这些属性的值来更新组件状态。

此处，increment 引用了一个在 `

复制代码

</div>

<div class="html">

此处，`increment` 引用了一个从 `setup()` 对象返回的方法：

```js{$}
setup() {
  const count = ref(0)

  function increment(e) {
    // 更新组件状态
    count.value++
  }

  return {
    count,
    increment
  }
}

在函数中，我们可以通过修改 ref 来更新组件状态。

事件处理函数也可以使用内置表达式，并且可以使用修饰符简化常见任务。这些细节包含在指南 - 事件处理。

现在，尝试自行实现 increment 方法函数并通过使用 v-on 将其绑定到按钮上。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。