vue 组件

<template>
  <div class="component-example">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      message: 'Hello from Vue Component!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Message has been changed!';
    }
  }
};
</script>

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

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>

解释说明

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

   • 定义了组件的 HTML 结构。
   • 使用双大括号 {{ message }} 绑定数据属性 message，并在页面上显示。
   • 添加了一个按钮，并通过 @click 指令绑定点击事件，触发 changeMessage 方法。

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

   • 导出一个 Vue 组件对象。
   • name 属性定义组件名称为 ExampleComponent。
   • data 函数返回一个对象，包含组件的状态（如 message）。
   • methods 对象中定义了 changeMessage 方法，用于改变 message 的值。

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

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