简介

就是*.vue的文件，必须由 @vue/compiler-sfc 预编译为标准的 JavaScript 与 CSS

src引入

目前在<script setup>语法糖中还无法使用src引入

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

样式特性

点击

scope

使用作用域样式，由于浏览器渲染各种各样 CSS 选择器的方式，有时渲染作用域样式会慢上很多倍，但是如果使用类选择器或者id选择器就会避免性能的损失

我们可以在style标签上写上scope，这样表示当前的样式只在当前文件中有用，他是通过postCSS来实现的

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

编译后

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

选择器

但是我们要是想用选择作用域之外的一些元素，就要使用到选择器了

深度选择器

影响到作用域下的子元素

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

插槽选择器

作用域中的样式不会影响到插槽中的类，但是想要改变插槽的模板一些样式的话，就需要插槽选择器

<style scoped>
:slotted(div) {
  color: red;
}
</style>

全局选择器

想要当前的样式作用到全局，那么这里有两种方法

style标签

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

全局选择器

<style scoped>
:global(.red) {
  color: red;
}
</style>

moudle

我们可以在style标签上写上scope，这样他会把相关的类封装到一个$style的对象中,使用的时候使用class绑定以及对象的取值语法

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<style module>
.red {
  color: red;
}
</style>

在标签中定义的类也是在当前组件有用

css函数(绑定)

单文件组件的可以使用v-bind函数，他的参数是一个响应式数据，这样css属性可以访问到我们定义的响应式的数据

点击

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}