vue2 component

// Vue 2 Component 示例代码

<template>
  <div class="my-component">
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">点击次数: {{ counter }}</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello from MyComponent!',
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter += 1;
    }
  }
};
</script>

<style scoped>
.my-component {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 16px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 定义了组件的 HTML 结构。
   • 使用双大括号 {{ message }} 和 {{ counter }} 来绑定数据属性。
   • 使用 @click 指令来绑定按钮的点击事件到 incrementCounter 方法。

2. 脚本部分 (<script>):

   • 导出一个默认对象，定义了组件的配置。
   • name 属性指定了组件的名称。
   • data 函数返回一个对象，包含组件的状态（message 和 counter）。
   • methods 对象定义了组件的方法，这里有一个 incrementCounter 方法用于增加 counter 的值。

3. 样式部分 (<style scoped>):

   • 使用 scoped 属性确保这些样式仅应用于当前组件。
   • 定义了一些简单的样式来美化组件。