vue component

<template>
  <div class="my-component">
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">Clicked {{ counter }} times</button>
  </div>
</template>

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

<style scoped>
.my-component {
  text-align: center;
  margin-top: 50px;
}
</style>

解释说明：

• Template: 定义了组件的HTML结构。这里包含了一个<h1>标签用于显示消息，以及一个按钮用于触发点击事件。
• Script:
  • name: 组件的名称为MyComponent。
  • data(): 返回一个对象，包含组件的状态（message和counter）。
  • methods: 定义了组件的方法，如incrementCounter，每次点击按钮时会调用此方法来增加计数器的值。
• Style (scoped): 样式仅作用于当前组件，避免样式污染其他组件。