vuecomponent

<template>
  <div class="vuecomponent">
    <!-- 这里是组件的模板部分 -->
    <h1>{{ message }}</h1>
    <button @click="increment">点击我</button>
    <p>点击次数: {{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'VueComponent', // 组件名称
  data() {
    return {
      message: '欢迎来到 Vue 组件示例', // 数据属性
      count: 0 // 计数器初始值
    };
  },
  methods: {
    increment() {
      this.count++; // 每次点击按钮时计数器加1
    }
  }
};
</script>

<style scoped>
/* 组件样式 */
.vuecomponent {
  text-align: center;
  margin-top: 50px;
}
</style>

解释说明：

• <template>: 定义了组件的 HTML 结构，包括一个标题、一个按钮和一个显示点击次数的段落。
• <script>: 包含组件的逻辑。data 函数返回组件的状态（如 message 和 count），methods 定义了组件的方法（如 increment 方法）。
• <style scoped>: 定义了仅应用于该组件的样式。scoped 属性确保样式不会影响其他组件。

这个示例展示了如何创建一个简单的 Vue 组件，并通过数据绑定和事件处理实现交互功能。