单文件组件

白弧

于 2023-07-24 11:27:09 发布

阅读量230

点赞数

文章标签： vue.js html5 css 前端前端框架

本文链接：https://blog.csdn.net/weixin_51700454/article/details/131892681

版权

单文件组件（SFC）是Vue项目中的一种组织代码的方式，允许在同一个文件中包含HTML、CSS和JavaScript。SFC提供语法高亮和代码提示，支持私有样式通过`scoped`属性实现，以及使用`:deep()`或预处理器解决样式穿透问题。关闭ESLint可以在`vue.config.js`中设置`lintOnSave`为`false`。

摘要由CSDN通过智能技术生成

什么是单文件组件

在 Vue 项目中，后缀名为 .vue 的，就是单文件组件。简称 SFC（Single File Component）

有什么好处

使用熟悉的 HTML、Css、JavaScript 语法编写模块化的组件
通过给编辑器（VsCode）安装一些插件，有语法高亮、代码提示
可以实现组件的私有样式

3.单文件组件的组成

复制<script>
export default {
  data() {
    return {
      info;
    }
  }
}
</script>

<template>
  <div class="info">{{ info }}</div>
</template>

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

<script> 组件的逻辑部分相当于原来我们学的组件的配置项
template 组件的模板部分，相当于原来我们学的组件的配置项的tempalte部分
- 必须的，有且能有有一个
style 组件的样式部分
- 默认是全局样式，可以通过给 style 标签添加一个 scoped 属性，让这个样式只针对当前组件生效。
- 可选的，可以有多个 style 标签

如何设置私有作用域样式

方式：

可以通过给 style 标签添加一个 scoped 属性，让这个样式只针对当前组件生效。

如何实现的呢：

会将设置了 scoped 属性的组件的模板的所有元素上，都添加上一个 data-xxxx 属性
最终生成的样式，会携带上 [data-xxxx] 这样的属性选择器

样式穿透

如果一个组件有自己的私有作用域样式，我使用它时要修改它的样式该如何办

使用深度选择器 :deep() 来控制子组件内的样式 - 推荐 ::v-deep(选择器){}
再写一个不设置 scoped 属性的 style 标签
使用:global(.global_class)的格式

使用 css预处理器

css预处理器有哪些：

scss
less
windcss tailwindcss

只需要给 style 标签，设置一个 lang 属性，属性值为对应的预处理器即可。

复制<style lang="less"></style>

关闭eslint

vue.config.js

复制const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: false,
  lintOnSave: false, // 关闭语法检查
})