单文件组件 (.vue 文件)
概述
在 Vue.js 中，单文件组件（Single File Components，简称 SFC）是一种将组件的模板、脚本和样式封装在一个文件中的方式。这种文件通常以 .vue 扩展名结尾，称为 .vue 文件。单文件组件使得组件的结构更加清晰，便于维护和复用。
为什么使用单文件组件？
- 模块化开发：将组件的模板、脚本和样式放在一个文件中，便于管理和维护。
- 语法高亮：现代的代码编辑器（如 VSCode）支持
.vue文件的语法高亮，提高开发效率。 - Scoped CSS：可以在组件内部定义作用域样式，避免样式冲突。
- 预处理器支持：支持使用 Sass、Less 等 CSS 预处理器。
单文件组件的结构
一个典型的 .vue 文件通常包含三个部分：
<template>：定义组件的 HTML 模板。<script>：定义组件的 JavaScript 逻辑。<style>：定义组件的 CSS 样式。
示例
<template>
<div class="hello">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
changeMessage() {
this.message = 'Message Changed!';
}
}
};
</script>
<style scoped>
.hello {
text-align: center;
margin-top: 60px;
}
h1 {
color: #42b983;
}
</style>
解释
<template>：定义了组件的 HTML 结构，使用双大括号{{ }}进行数据绑定。<script>：导出一个 Vue 组件对象，包含data和methods等选项。<style scoped>：定义了组件的样式，scoped属性表示样式仅作用于当前组件。
实践练习
任务
创建一个简单的计数器组件，包含以下功能：
- 显示当前计数值。
- 提供按钮增加和减少计数值。
步骤
- 创建
.vue文件：在项目中创建一个新的.vue文件，例如Counter.vue。 - 编写模板：在
<template>中定义 HTML 结构，显示计数值和按钮。 - 编写脚本：在
<script>中定义组件逻辑，包括data和methods。 - 编写样式：在
<style>中定义组件的样式。
示例代码
<template>
<div class="counter">
<h1>Counter: {{ count }}</h1>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
};
</script>
<style scoped>
.counter {
text-align: center;
margin-top: 60px;
}
button {
margin: 0 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
解释
<template>：显示当前计数值和两个按钮，分别用于增加和减少计数值。<script>：定义了count数据属性和increment、decrement方法。<style scoped>：定义了组件的样式，scoped属性确保样式仅作用于当前组件。
总结
单文件组件是 Vue.js 中一种强大的组件组织方式，它将模板、脚本和样式封装在一个文件中，便于管理和维护。通过本教程的学习，你应该能够理解单文件组件的基本结构，并能够创建简单的 Vue 组件。
下一步
- 尝试在项目中创建更多的单文件组件，并理解组件之间的通信方式（如
props和events）。 - 探索 Vue Router 和 Vuex 等高级主题，进一步扩展你的 Vue.js 技能。
希望本教程对你有所帮助，祝你在 Vue.js 的学习旅程中取得成功！