Vue.js 组件的基本结构：模板、脚本和样式
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>
运行效果
- 页面显示标题、内容和按钮。
- 点击按钮，会弹出一个提示框，显示欢迎信息。
- 样式优雅，布局整洁。
五、总结
Vue 组件的 .vue 文件分为模板（Template）、脚本（Script）和样式（Style）三部分：
- 模板：负责定义视图，支持数据绑定和指令。
- 脚本：负责处理逻辑，管理数据、方法和生命周期。
- 样式：负责定义组件的外观，可以作用于组件内部的元素。
清晰的结构让 Vue 组件开发变得简单直观。希望这篇文章能帮你快速掌握 Vue 组件的基本结构！
原文地址：https://blog.csdn.net/sjw890821sjw/article/details/145146520
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！