Vue3官网-工具(十八)单文件组件、(SFC)、测试(Jest)、移动端
文章目录
总结:
1. 单文件组件
介绍
Vue 单文件组件(又名 *.vue
文件,缩写为 SFC)是一种特殊的文件格式,它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。下面是 SFC 示例:
<script>
export default {
data() {
return {
greeting: 'Hello World!'
}
}
}
</script>
<template>
<p class="greeting">{
{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
正如所见,Vue SFC 是经典的 HTML、CSS 与 JavaScript 三个经典组合的自然延伸。每个 *.vue
文件由三种类型的顶层代码块组成:<template>
、<script>
与 <style>
:
<script>
部分是一个标准的 JavaScript 模块。它应该导出一个 Vue 组件定义作为其默认导出。<template>
部分定义了组件的模板。<style>
部分定义了与此组件关联的 CSS。
查阅 SFC 语法规范 查看更多细节。
工作原理
Vue SFC 是框架指定的文件格式,必须由 @vue/compiler-sfc 预编译为标准的 JavaScript 与 CSS。编译后的 SFC 是一个标准的 JavaScript(ES)模块——这意味着通过正确的构建配置,可以像模块一样导入 SFC:
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
SFC 中的 <style>
标签通常在开发过程中作为原生 <style>
标签注入以支持热更新。对于生产环境,它们可以被提取并合并到单个 CSS 文件中。
可以在 Vue SFC Playground 中使用 SFC ,探索其是如何编译的。