Vue 单文件组件

适用范围:

运行环境

• 需要编译

1. 优点:

1. 避免过多层级的嵌套, 代码更容易阅读
2. 同时包含css, html, JavaScript, 可以集中阅读, 方便维护

梗概:

后缀名为.vue,缩写为 SFC

1. 将css与html与JavaScript语法合并在同一个文件的不同位置中
2. 以下两个标签都是用来编写组件中的逻辑主内容的(两个标签可以同时存在, 也可以单独存在):
   1. <script>标签 用来写选项式api
   2. [[Vue 单文件组件中的增强组合式api|的组合式api
3. <template>标签用来写组件模板
4. <style>标签 用来编写有关的css样式
5. 可以在标签中通过属性lang="预处理器"声明预处理器
   1. 如<script lang="ts">

实例:

<script>//选项式api
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>
 
<script setup>//增强版本的组合式api
let word = "this is a component!"
</script>
 
<template>
	<h>{{word}}</h>
  <p class="greeting">{{ greeting }}</p>
</template>
 
<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

1. 预处理器:

代码块可以使用 lang 这个 attribute 来声明预处理器语言，最常见的用例就是在 <script> 中使用 TypeScript：

<script lang="ts">
  // use TypeScript
</script>

lang 在任意块上都能使用，比如我们可以在 <style> 标签中使用 SASS 或是 <template> 中使用 Pug：

<template lang="pug">
p {{ msg }}
</template>
<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>

注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：

• Vite
• Vue CLI
• webpack + vue-loader