BEM 是块、元素、修饰符的缩写，是一种前端命名规范。在前端开发过程中，为 HTML 元素添加 BEM 类名既能提高代码的可读性，也能降低代码的耦合性。使用 BEM 规范的 CSS 可以轻松地重复利用和维护，同时也可以提高页面的渲染效率。vue-bem-helper 是一个基于 BEM 的命名规范的 npm 包，它提供了类 BEM 的功能来帮助前端开发人员更容易地管理和维护 css 类。
安装
可以通过 npm 进行安装：
--- ------- --------------
使用
在使用 vue-bem-helper 之前，需要在 Vue 中注册插件：
------ ------------ ---- ---------------- ---------------------
使用 vue-bem-helper 可以通过以下方法生成 css 类名：
block
生成块级名：
---------------- -- -------
element
生成元素名：
---------------- ---------- -- ----------------
modifier
生成修饰符名：
---------------- - --------- ---------- -- -- ------ ---------------- ------------------------- - --------- ---------- -- -- --------------- -------------------------
multiple-modifiers
生成多个修饰符名：
---------------- - --------- ------------- ------------ -- -- ------ ---------------- -----------------
mix
生成 BEM 类名的同时，允许添加普通的 css 类名：
---------------- - ---- -------------- -- -- ------ -------------
示例
在下面的示例中，我们将通过 vue-bem-helper 实现一个简单的切换按钮效果：
----------
------- ------------------- ----------------------- ------- -----------
-----------
--------
------ ------- -
---- -- -
------ -
--------- -----
-
--
--------- -
------- -- -
------ ------------- - ---- - ----
--
---------- -- -
------ -------------- - --------- - ------- ------------- - --
-
--
-------- -
----------- -- -
------------- - --------------
-
-
-
---------
------ -------
---- -
-------- -------------
-------- ----
------- --- ----- -----
----------------- -----
-------------- ----
-------- -----
------------ -----
------- --------
----------- --- --- ------------
-
------------ -
----------------- -----
------ -----
-
--------在上面的代码中，我们通过 $b 方法生成了 btn 按钮组件的类名，并且根据 isActive 数据不断切换样式。这使得样式的维护变得很方便，并能够提高代码的可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5551ab1864dac66a09