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>