Vue学习记录之六（组件实战及BEM框架了解）

embedded/2024/11/14 5:57:26/

一、BEM

BEM是一种前端开发中常用的命名约定，主要用于CSS和HTML的结构化和模块化。BEM是Block、Element、Modifier的缩写。

  • Block（块）：独立的功能性页面组件，可以是一个简单的按钮，一个复杂的导航条，或者任何其他独立的UI部分。块的名称是唯一的，且通常是名词，比如menu、button等。
  • Element（元素）：块的组成部分，具体表现为块内部的某个部分。元素的命名是在块的名称后加上两个下划线__，然后是元素的名称，比如menu__item、button__icon等。
  • Modifier（修饰符）：用于定义块或元素的不同状态或外观。修饰符的命名是在块或元素的名称后加上两个破折号–，然后是修饰符的名称，比如button–large、menu__item–active等。

通过这种命名方式，可以使代码具有更好的可读性和可维护性，并且不同组件之间不会发生命名冲突。例如：

<div class="menu"><ul class="menu__list"><li class="menu__item menu__item--active">Home</li><li class="menu__item">About</li></ul>
</div>

在这个例子中：

menu 是块（Block），表示一个菜单。
menu__list 是元素（Element），表示菜单中的列表。
menu__item 是元素（Element），表示列表项。
menu__item - - active 是修饰符（Modifier），表示列表项的活动状态。

使用BEM的好处包括：
可读性强：通过明确的命名规则，代码变得更加容易理解。
可维护性高：模块化的结构使得代码更容易维护和更新。
避免命名冲突：由于每个类名都包含了块的名称，避免了全局命名空间的冲突。

二、sass

（Syntactically Awesome Style Sheets）是CSS的扩展，提供了更强大的功能。使用的时候先进行安装。

pnpm i sass

1、变量： 定义变量使用 $变量名

$primary-color: #3498db;

2、嵌套：

.nav {ul {list-style: none;}li {display: inline-block;}
}

3、混合（Mixins）： 使用@mixin
定义和使用混合宏
定义混合宏（mixin）：使用 @mixin 指令来定义一组样式。
包含混合宏（mixin）：使用 @include 指令来将这些样式应用到某个选择器中。

@mixin border-radius($radius) {border-radius: $radius;
}
.box {@include border-radius(10px);
}

4、继承（Extend）：

.button {padding: 10px;background: $primary-color;
}.primary-button {@extend .button;color: white;
}

5、运算：

.container {width: 100% - 20px;
}

6、条件语句：

@if $theme == dark {background: black;
} @else {background: white;
}

7、循环：

@for $i from 1 to 3 {.item-#{$i} {width: 100px * $i;}
}

8、插值语法
用于动态生成类名、ID或其他属性值，通常通过#{$variable}的方式实现。以下是一些插值语法的常见用法：

//动态生成类名
$color: red;
.text-#{$color} {color: $color;
}
这段代码生成的类名是 .text-red。
--------------------------------------
//动态生成属性值 
$size: 16px;
.box {width: #{$size * 2};
}
这段代码生成的样式为 width: 32px;。
---------------------------------------
//与其他字符串结合
$prefix: "btn-";
.#{$prefix}primary {background-color: blue;
}
这段代码生成的类名是 .btn-primary。
-------------------------------------------
// 在选择器中使用插值
$state: "active";
.button-#{$state} {color: green;
}
这段代码生成的类名是 .button-active。

这些语法使得Sass更加灵活，易于管理和维护样式表。 @content 相当于一个占位符，也可以理解为slot（插槽）

  • #{} 用于插入任何类型的值（如属性、选择器名等），不特定于类。
  • .#{} 主要用于生成类选择器，确保插入的内容以.开头，形成有效的类选择器。
    所以，如果你需要插入的内容是类名，就使用.#{}；如果是属性名或者其他类型的选择器，则直接使用#{}。

三、使用

1、在src 目录下建立一个bem.scss 文件。

$namespcae: 'xm' !default;
$block-sel:"-" !default;
$elem-sel:"__" !default;
$mod-sel:"--" !default;//1、定义block
@mixin b($block){//如 class="xm-block" 即： .xm-block{}$B: #{$namespcae + $block-sel + $block};//命名完了以后，我们初始化下.#{$B}{//相当于占位符或者插槽@content;}
}
//2、定义element  如 .xm-block__inner{}  类型的。
@mixin e($e){$selector: &; //&符号读取到父级的类名(它代表‌父选择器)，即： .xm-block/*#{$selector + $elem-sel + $e}{@content;}*///但是我们一般希望编译出去不要在增加这么一个父级的类型//如 .xm-block .xm-block__inner{},这里需要跳出嵌套，// 使用 @at-root进行包裹,然后就变成了独立的.xm-block__inner{}。@at-root{#{$selector + $elem-sel + $e}{@content;}}
}
//3、modify
@mixin m($m){$selector: &; @at-root{#{$selector + $mod-sel + $m}{@content;}}
}

2、写完规则，要在全局使用，还需要进行配置。 在vite.config.ts 中进行配置。

css:{preprocessorOptions:{scss:{additionalData:`@import "./src/deom.scss";`}}}

在这里插入图片描述
3、配置完了以后就可以使用了。在App.vue中使用
注意 结构，以块为单位，块内的元素，和修饰符要写在自己的块内。

<template><div><div class="xm-test">我是块<div class="xm-test__inner">我是元素</div><div class="xm-test--success">我是修饰符</div></div></div>
</template>
<script setup lang='ts'>
import A from './components/A.vue';
</script>
<style lang="scss">
@include b(test){color: red;@include e(inner){color: green;}@include m(success){color: orangered;}
}
</style>

在这里插入图片描述
如果不使用@at-root包裹，那么编译以后就会变成下面的格式：
在这里插入图片描述

四、实战

在这里插入图片描述

一、使用vite+vue3 构成程序框架。
二、清除默认样式
在根目录下的index.html中加入

<style>*{padding: 0;margin: 0;}html,body{height: 100%;overflow: hidden;}

在我们的scss文件中在加入一个混合项：bfc

$namespcae: 'xm' !default;
$block-sel:"-" !default;
$elem-sel:"__" !default;
$mod-sel:"--" !default;@mixin bfc{height: 100%;overflow: hidden;
}@mixin b($block){$B: #{$namespcae + $block-sel + $block};.#{$B}{@content;}
}
@mixin e($e){$selector: &; @at-root{#{$selector + $elem-sel + $e}{@content;}}
}
@mixin m($m){$selector: &; @at-root{#{$selector + $mod-sel + $m}{@content;}}
}

然后app.vue 的style中加入：

<style lang="scss">#app{@include bfc;}
</style>

新增目录结构
在这里插入图片描述
Layout/index.vue 代码如下：

<template><div class="xm-box"><div><Menu></Menu></div><div class="xm-box__right"><Header></Header><Content></Content></div></div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
</script>
<style scoped lang="scss">
@include b(box){@include bfc;display: flex;@include e(right){display: flex;  //默认的是一行排列flex-direction: column; //纵向排列flex: 1  //左右拉满，也就是100%显示}
}
</style>

Layout/Content/index.vue 代码如下：

<template><div class="xm-content"><div class="xm-content__items" v-for="item in 100">{{ item }}</div></div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
</script>
<style scoped lang="scss">
@include b(content){flex: 1;  //向下也拉满了overflow: auto;  //自适应高度@include e(items){padding: 10px;margin: 10px;border: 1px solid #ccc;border-radius: 4px;}
}
</style>

Layout/Header/index.vue 代码如下：

<template><div class="xm-header">Header</div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
</script>
<style scoped lang="scss">
@include b(header){height:50px;border-bottom: 1px solid #ccc;
}
</style>

Layout/Menu/index.vue 代码如下：

<template><div class="xm-menu">Menu</div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
</script>
<style scoped lang="scss">
@include b(menu){height: 100%;min-width: 200px;border-right: 1px solid #ccc;
}
</style>

http://www.ppmy.cn/embedded/116174.html

相关文章

# 高可用的并发解决方案nginx+keepalived（三）

# 高可用的并发解决方案nginx+keepalived（三）

高可用的并发解决方案nginxkeepalived&#xff08;三&#xff09; 一、Nginx搭建图片服务器 针对任何站点&#xff0c;几乎都要访问图片&#xff0c;而一个网页里面几乎有好些张图片&#xff0c;这时候会占据大量tomcat连接&#xff0c;造成大量并发&#xff0c;我们可以通过…
阅读更多...
股票程序化接口，什么性能的笔记本，用作数据分析，量化交易

股票程序化接口，什么性能的笔记本，用作数据分析，量化交易

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…
阅读更多...
获取商品销量详情API：深入解析返回值

获取商品销量详情API：深入解析返回值

在电商领域&#xff0c;了解商品的销量详情对于商家制定营销策略、优化库存管理和提升用户体验至关重要。通过调用获取商品销量详情的API接口&#xff0c;商家可以实时获取关键的销售数据&#xff0c;从而做出更加明智的决策。本文将深入解析获取商品销量详情API的返回值&#…
阅读更多...
简历技能面试问答

简历技能面试问答

变成语言和开发工具 C新特性 自动类型推导 (auto)&#xff1a; 自动推导变量的类型&#xff0c;减少显式类型声明的繁琐 范围 for 循环&#xff1a; 用于遍历容器或数组&#xff0c;简化代码。 nullptr&#xff1a; nullptr 取代 NULL&#xff0c;表示空指针&#xff0c;类…
阅读更多...
【RabbitMQ】RabbitMQ 的概念以及使用RabbitMQ编写生产者消费者代码

【RabbitMQ】RabbitMQ 的概念以及使用RabbitMQ编写生产者消费者代码

目录 1. RabbitMQ 核心概念 1.1生产者和消费者 1.2 Connection和Channel 1.3 Virtual host 1.4 Queue 1.5 Exchange 1.6 RabbitMO工作流程 2. AMQP 3.RabbitMO快速入门 3.1.引入依赖 3.2.编写生产者代码 ​3.3.编写消费者代码 4.源码 1. RabbitMQ 核心概念 在安装…
阅读更多...
蛋白质SCOP数据库介绍

蛋白质SCOP数据库介绍

SCOP（Structural Classification of Proteins）数据库和CATH数据库是两种常用的蛋白质结构分类系统，它们通过不同的方法对已知的蛋白质三维结构进行分类，帮助研究人员理解蛋白质的进化关系和功能。 SCOP数据库简介 SCOP| Structural Classification of Proteins SCOP（Str…
阅读更多...
Fyne ( go跨平台GUI )中文文档-小部件 (五)

Fyne ( go跨平台GUI )中文文档-小部件 (五)

本文档注意参考官网(developer.fyne.io/) 编写, 只保留基本用法 go代码展示为Go 1.16 及更高版本, ide为goland2021.2 这是一个系列文章&#xff1a; Fyne ( go跨平台GUI )中文文档-入门(一)-CSDN博客 Fyne ( go跨平台GUI )中文文档-Fyne总览(二)-CSDN博客 Fyne ( go跨平台GUI…
阅读更多...
SpringBootWeb响应

SpringBootWeb响应

2. 响应 前面我们学习过HTTL协议的交互方式&#xff1a;请求响应模式&#xff08;有请求就有响应&#xff09; 那么Controller程序呢&#xff0c;除了接收请求外&#xff0c;还可以进行响应。 2.1 ResponseBody 在我们前面所编写的controller方法中&#xff0c;都已经设置了…
阅读更多...
最新文章

Copyright @ 2022~2023