Vue:单文件组件
Vue：单文件组件
1、 什么是单文件组件？
在传统的Vue开发里，我们接触的是非单文件组件，它们通常被定义在同一个HTML文件中，随着项目规模的扩大，代码会变得杂乱无章，维护起来极为困难。而单文件组件（Single File Component，SFC）则是Vue提供的一种强大的组织方式，它将一个组件的所有相关代码集中在一个文件里，具有诸多优势。
- 文件与组件的对应关系：单文件组件严格遵循一个文件对应一个组件的原则。这使得代码结构更加清晰，每个组件的功能和实现都被封装在独立的文件中，便于开发者进行管理和维护。比如，在一个大型电商项目中，商品列表组件、购物车组件、用户信息组件等都可以分别存放在不同的单文件组件中，开发者可以快速定位和修改特定组件的代码。
- 文件命名与识别：单文件组件的文件名通常以
.vue结尾，这是Vue框架所规定的。这种文件格式浏览器无法直接打开运行，需要借助Vue框架进行编译。在编译过程中，Vue会将.vue文件中的模板、脚本和样式分别处理，最终转换为浏览器能够识别的HTML、JS和CSS代码。 - 命名规范：单文件组件的文件名命名规范和组件名的命名规范一致，有以下几种常见方式：
- 全部小写：例如
userlist，简洁直观，但在大型项目中可能会降低代码的可读性。 - 首字母大写，后面全部小写：如
Userlist，一定程度上能突出组件的特殊性，便于区分。 - kebab - case命名法：像
user - list，这种命名方式在前端开发中广泛使用，具有良好的可读性，能够清晰地表达组件的功能。 - CamelCase命名法：例如
UserList，与Vue开发者工具的展示风格相呼应，方便在调试和开发过程中快速识别组件。
- 全部小写：例如
需要注意的是，不能使用小驼峰命名法（如 userList），因为它容易与JavaScript变量命名混淆；同时，也不能使用HTML标签名作为组件名，否则会导致浏览器解析时产生歧义。
2、 x.vue文件的内容包括三块
单文件组件 .vue 文件主要由三个部分组成，分别负责组件的结构、交互和样式，它们相互协作，共同构建出完整的组件。
- 结构（
<template>）：<template>标签用于定义组件的HTML结构。它遵循HTML语法规范，同时可以使用Vue的指令来实现动态内容的渲染。例如，使用v - for指令可以根据数据列表动态生成DOM元素，使用v - if指令可以根据条件显示或隐藏元素。以下是一个简单的示例：
<template>
<div>
<h1>{{ title }}</h1>
<ul>
<li v - for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
- 交互（
<script>）：<script>标签内编写的是组件的JavaScript代码，用于处理组件的逻辑。在这个部分，我们可以定义组件的数据、方法、生命周期钩子函数等。例如：
<script>
export default {
data() {
return {
title: '商品列表',
items: [
{ id: 1, name: '商品1' },
{ id: 2, name: '商品2' }
]
};
},
methods: {
addItem() {
this.items.push({ id: this.items.length + 1, name: `商品${this.items.length + 1}` });
}
},
mounted() {
console.log('组件已挂载');
}
};
</script>
- 样式（
<style>）：<style>标签用于编写组件的CSS样式。可以使用普通的CSS语法，也可以结合预处理器（如Sass、Less）来提高样式编写的效率。通过设置scoped属性，可以将样式的作用域限定在当前组件内，避免样式冲突。例如：
<style scoped>
h1 {
color: blue;
}
li {
list - style: none;
}
</style>
3、 export和import，ES6的模块化语法
在单文件组件的开发中，我们经常需要在不同的文件之间共享和使用组件，这时就需要用到ES6的模块化语法，通过 export 和 import 来实现组件的导出和导入。
- 默认导入和导出
- 导出：使用
export default可以导出一个默认的模块对象。在一个模块中，只能有一个默认导出。例如：
- 导出：使用
// MyComponent.vue
export default {
// 组件配置
};
- 导入：使用
import语句导入默认导出的模块，导入时可以使用任意名称。例如：
// main.js
import MyComponent from './MyComponent.vue';
- 按需导入和导出
- 导出：通过
export {a, b}可以将模块中的多个成员分别导出。例如：
- 导出：通过
// utils.js
export const formatDate = (date) => {
// 日期格式化逻辑
};
export const calculateTotal = (items) => {
// 计算总价逻辑
};
- 导入：使用
import {a, b}语句按需导入模块中的成员。例如：
// main.js
import { formatDate, calculateTotal } from './utils.js';
- 分别导出和导入
- 导出：分别使用
export语句导出变量或函数。例如：
- 导出：分别使用
// config.js
export var apiUrl = 'https://example.com/api';
export function sayHello() {
console.log('Hello!');
}
- 导入：通过
import {name, sayHi}导入相应的成员。例如：
// main.js
import { apiUrl, sayHello } from './config.js';
4、 VScode插件
在使用VSCode编写单文件组件时，安装一些插件可以显著提高开发效率。其中，vetur 插件是一个非常实用的选择。
- 高亮显示：安装
vetur插件后，.vue文件中的不同部分（<template>、<script>、<style>）会有不同的颜色高亮显示，使代码结构更加清晰，便于阅读和编写。 - 智能提示：该插件支持代码智能提示功能，当输入特定的代码片段时，会自动弹出相关的建议和补全选项。例如，输入
v -会提示所有可用的Vue指令，输入this.会提示当前组件中定义的所有数据和方法。 - 语法检查：
vetur会对.vue文件进行语法检查，在代码编写过程中实时发现并标记语法错误，帮助开发者及时纠正问题，提高代码质量。
5、 第一个单文件组件
将之前“组件嵌套”的例子修改为单文件组件，无论使用单文件组件还是非单文件组件，都遵循创建组件、注册组件、使用组件这三个基本步骤。
- 文件结构与分工
main.js：创建Vue实例的代码通常放在main.js中，它作为项目的入口文件，负责初始化Vue应用并引入根组件。例如：
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
index.html：剩下的HTML代码一般存放在 index.html 中，它包含一个根容器，用于挂载Vue应用。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
- 代码执行原理
- 加载HTML页面：浏览器打开
index.html页面，加载根容器<div id="app"></div>。 - 加载Vue核心库：浏览器加载
vue.js文件，使环境具备使用Vue的能力。 - 加载
main.js：在main.js中，使用import语句导入各个组件，完成组件的创建和注册。例如：
- 加载HTML页面：浏览器打开
import App from './App.vue';
import son from './son.vue';
import girl from './girl.vue';
import child from './child.vue';
- 创建Vue实例并渲染：在
main.js中创建Vue实例，将根组件App
渲染到根容器中。Vue实例会编译模板语句，将组件的内容渲染到页面上。
需要注意的是，写完代码后不能直接在浏览器中运行，因为浏览器不认识 .vue 文件和ES6的模块化语法。此时需要安装Vue脚手架，它集成了一系列的构建工具和预设配置，能够帮助我们处理 .vue 文件的编译、ES6语法转换以及项目的打包和部署等操作。