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

html-css018

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 的值关联到动态的组件状态上

这个语法同样也适用于

vue伪类和css区别：

1、vue伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。

2、css是用来添加一些选择器的特殊效果。

Vue是一个js框架。什么叫框架？个人理解是对原生JS ，html,css的功能进行封装之后形成的一个语言。

比如，你需要盖一座房子，你用原生js，html，css写代码相当于你用手一块砖一块砖地垒。而使用Vue，Vue已经给你了一面墙，一根房梁，一扇门，你需要做的是把门墙梁拼成房子。它帮助你提高开发效率。你只需要按照它的规矩来写三段部分：<template>、<script>、<style>就能完成平时html、css、js的功能。页面视图展示，前后数据交互都完成了。

之后使用webpack等工具，会将vue语法转换为html,js,css。

其实使用Vue开发和原生html,css,js开发步骤逻辑是一样的。

除此之外，vue还有动态绑定，数据驱动等等特点，这些都是题外话。我相信我的回答已经解决了你的问题，如果感觉有帮助，请采纳我的答案。