当前位置：首页 > article >正文

Vue.js 组件的基本结构：模板、脚本和样式

article 2025/1/15 16:43:16

Vue.js 组件的基本结构：模板、脚本和样式

大家好！今天我们聊聊 Vue 组件的基本结构。如果你刚接触 Vue.js，可能会觉得 .vue 文件有点特殊。其实，Vue 组件是高度模块化的，分为三部分：模板、脚本和样式。接下来我们一起看看它们的作用和写法。

一、模板（Template）

模板是 Vue 组件的视图部分，用来定义页面结构。它看起来很像普通的 HTML，但可以直接使用 Vue 的模板语法，比如数据绑定和指令。

示例

<template>
  <div class="greeting">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

特点：

使用双花括号 {{ }} 绑定数据。
可以写任何合法的 HTML 标签。
可以直接使用 Vue 指令（比如 v-if、v-for 等）。

注意：

模板的根节点只能有一个！比如，<div> 是上面模板的根节点。

二、脚本（Script）

脚本是 Vue 组件的逻辑部分，用来处理数据、方法和生命周期钩子等内容。所有的逻辑代码都写在 <script> 标签中。

示例

<script>
export default {
  name: 'Greeting', // 组件名称
  data() {
    return {
      title: 'Hello, Vue!',
      message: '这是你的第一个 Vue 组件！'
    };
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  },
  created() {
    console.log('组件已创建');
  }
};
</script>

特点：

data 是一个函数，返回组件的状态数据。
methods 定义组件的方法，可以在模板中调用。
生命周期钩子（比如 created）让你可以在组件的不同阶段执行代码。
export default 是标准的 ES 模块语法，用于导出组件配置。

注意：

如果你的组件比较复杂，可以将代码拆分成多个模块再引入，保持代码清晰。

三、样式（Style）

样式是 Vue 组件的外观部分，用来定义组件的 CSS 样式。写在 <style> 标签中的内容会作用于这个组件。

示例

<style scoped>
.greeting {
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  font-size: 24px;
  margin: 0;
}
</style>

特点：

scoped 属性表示样式只作用于当前组件，避免样式冲突。
可以写普通的 CSS，也可以使用预处理器（比如 SCSS、LESS 等）。
如果没有 scoped，样式会全局生效。

注意：

即使使用了 scoped，某些深层子元素的样式可能需要通过特殊语法（如 >>> 或 /deep/）覆盖。

四、综合实例

我们来写一个完整的 Vue 组件，结合模板、脚本和样式。

<template>
  <div class="greeting">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="sayHello">点击问候</button>
  </div>
</template>

<script>
export default {
  name: 'Greeting',
  data() {
    return {
      title: 'Hello, Vue!',
      message: '欢迎来到组件的世界！'
    };
  },
  methods: {
    sayHello() {
      alert(this.message);
    }
  }
};
</script>

<style scoped>
.greeting {
  text-align: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h1 {
  color: #42b983;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  border: none;
  background-color: #42b983;
  color: white;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
</style>