vue export default

作者：平凡中的不凡发布日期:2026-05-01 浏览:144

// Vue 组件示例代码

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent', // 组件名称
  data() {
    return {
      message: 'Hello, Vue!' // 数据属性
    };
  },
  methods: {
    greet() {
      console.log(this.message); // 方法
    }
  },
  mounted() {
    this.greet(); // 组件挂载后调用的方法
  }
};
</script>

<style scoped>
/* 组件的局部样式 */
h1 {
  color: blue;
}
</style>

解释说明：

export default：用于导出一个默认对象，这里是 Vue 组件。
name：定义组件的名称，方便调试和引用。
data：返回一个包含组件数据的对象。这些数据可以在模板中通过双大括号语法 ({{ }}) 进行绑定。
methods：定义组件中的方法，可以在事件处理或其他逻辑中调用。
mounted：生命周期钩子，在组件挂载完成后执行，常用于初始化操作或数据获取。
<template>：定义组件的 HTML 模板。
<style scoped>：定义组件的样式，并且只作用于当前组件。

上一篇：vue clipboard

下一篇：vue antdesign