Vue3之单文件组件(SFC)
就是的文件,必须由预编译为标准的 JavaScript 与 CSS样式特性点击我们可以在标签上写上,这样表示当前的样式只在当前文件中有用,他是通过postCSS来实现的编译后选择器深度选择器插槽选择器全局选择器style标签全局选择器moudle我们可以在标签上写上,这样他会把相关的类封装到一个的对象中,使用的时候使用绑定以及对象的取值语法在标签中定义的类也是在当前组件有用单文件组件的可以使用函数
·
简介
就是*.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');
}
更多推荐
已为社区贡献7条内容
所有评论(0)