Vue3中CSS的新玩法-CSS模块 & 动态CSS

html-css016

Vue3中CSS的新玩法-CSS模块 & 动态CSS,第1张

Vue3对CSS支持加入了更多的特性支持,这样的话,我们在项目当中使用CSS就变得更加灵活了,来吧我们直接上干货

在style的标签上加一个module的属性,这样style里面的内容就会被编译成CSS Modules(模块),默认情况下,我们可以在模板代码里,或者JS里通过$style拿到所有样式属性并使用

我们也可以给CSS Modules自定义一个名称,在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性

与组合式 API 一同使用,注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}

可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上

这个语法同样也适用于

截至2022年4月,VUE 3 可以说是相对成熟了,但没有 VUE 2.× 成熟。

VUE 2.× 是一个比较稳定的版本,也是很长一段时间大家在使用的版本,社区生态已经十分完善了,所以,如果我们暂时还不必须去着急升级到VUE 3,毕竟等待vue3的生态成熟,还需要一段时间的积累,但是作为前端领域必不可少的一门技能,当然希望能够提前去接触到,毕竟前端的技术迭代更新就是这么快。

Vue.js 的主要特点:

1、易用:

在有HTML,CSS,JavaScript的基础上,快速上手。

Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。

Vue.js 的 API 的对于其他框架的参考不仅是参考,其中也包含了许多 Vue.js 的独特功能。

2、灵活:

简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

3、性能:

20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

以上内容参考:百度百科-Vue.js