使用Vue.js创建一个简单的计数器

在Vue.js中，创建一个简单的计数器是学习响应式编程和组件基础的绝佳方式。以下是一个基本的计数器组件示例，它展示了如何使用数据绑定和事件处理。

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
}
</script>

在这个组件中，我们定义了一个名为count的数据属性，以及两个方法increment和decrement来增加和减少计数。通过在按钮上使用@click指令，我们可以将这些方法绑定到点击事件上。每当按钮被点击时，相应的方法就会被调用，从而更新count的值，并且这种变化会立即反映在视图上，这是Vue.js响应式系统的强大之处。