Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量」[1]
在 Vue RFC 中有一个关于样式的提案 SFC style CSS variable injection，这个 RFC 为Vue开发者提供了一种使用组件的响应性数据作为CSS变量的方法。
https://segmentfault.com/a/1190000023479851
1、 什么是CSS预处理器 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。 2、lang 因此lang的属性可选：scss（sass）、less等等 即：<style lang="scss"> 3、scss和sass的区别 scss是sass的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点。 注明：使用这个lang的属性需要安装scss（sass） 4、scoped属性 scoped是指定样式的局部作用域。 在vue中：App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped，代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。
在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动 态绑定
在 《Vue 3：2020年中状态更新》 的文中曾经提到过尤雨溪希望7月中旬发布RC版(候选版本)，8月初发布3.0正式版。
具体例子如下： 首先在components中创建三个组件 Header.Vue 、Swiper.Vue、 Footer.Vue,然后在App.Vue中引入组件并定义要传递的数据。这里主要是将a数据传递给Header,arr传递给Swiper
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
不得不说CSS预处理器(Sass/Less/Stylus)极大的方便了前端研发攻城狮编写CSS样式，提供了变量定义、可嵌套的选择器、mixins混合书写、函数定义等诸多便捷的能力。
目前市面上主流的前端三大框架（均开源）：Angular（Facebook主导的）、React（Github主导的）、Vue（尤雨溪个人项目，全球开发者社区维护）
以前常常觉得，Vue 文件（单文件组件，Single File Component，SFC）的处理非常复杂，以至于很久一段时间，都不敢接触它，直到我看了 @vite/plugin-vue 的源码，才发现，这个过程并没有多复杂。因为 Vue 已经提供了 SFC 的编译能力，我们只需要站在巨人的肩膀上，简单地组合利用这些能力即可。
默认 webpack 只能处理 js 文件，如果在 js 文件中导入了 css 代码：
好，经过上个章节的介绍完毕之后，了解了一下 UniApp 的一个全局 页面配置文件，也就是我们的一个 pages.json 文件。
前端开发中有三大件：HTML、CSS、JavaScript，在前面的学习中，不管是学习 Vue 的指令系统还是 Vue 的事件修饰符，主要还是针对的是我们在前端开发中的 JavaScript 这一块，而在实际的开发中必定会需要涉及到对于页面布局的设计。即使你采用的是使用第三方的 UI 组件，当我们实际开发中时，还是需要自己写一些样式去满足自己的需求，如何实现在 Vue 中对元素设置样式则是本章学习的重点
本文主要是讲解 <script setup> 与 TypeScript 的基本使用。
我们用这三个维度分析下Vue的SFC（Single-File-Component，单文件组件）：
动态样式 作用：使用声明式变量来控制class和style的值 语法： ：class/：style 注意：尽可能不要把动态class和静态class一起使用，原因动态class起作用的时间会比较晚，需要通过Vue编译，会出现‘一闪而过’的效果。 动态class :class='由类名拼接而成的字符串""'字符串格式 :class='[表达式1,表达式2,...]'数组格式 注意：每个表达式都要求返回一个已经定义过的class类 :class='{"css类名1":布尔值，"css类名2":布尔值,...}'
我们上一节讲了插值，主要是针对DOM的文本节点操作。那么如果现在有个需求，我们需要点击按钮，更换图片，怎么办？或者我们需要更换一下元素的样式该怎么实现呢？
注意： key: value 表示时，key可以不加单引号或双引号，但value必须加上，或者直接在定义上加上符号 对象语法案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body> 01
vue2的时候想必大家有遇到需要在style模块中访问script模块中的响应式变量，为此我们不得不使用css变量去实现。现在vue3已经内置了这个功能啦，可以在style中使用v-bind指令绑定script模块中的响应式变量，这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量。注：本文中使用的vue版本为3.4.19。
本文档仅作为个人学习笔记、详细内容可以查看官网文档，官方文档有更详细的使用说明及案例
和选项api的最大不同就是新增了 setup()。我们要处理的逻辑都放到了setup()中
众所周知，class是调用全局样式集合的，而style则是写具体的每个样式细节的，优先级是高于class的。
1.ES6常用语法之变量的定义 1.块级作用域 <script> if (1){ var username = 'zhangsan'; // 块级里面，var定义的变量全局可以使用 let age = 22; // 块级里面 let 定义的变量只能在块级里面使用 console.log(age) // 块级内部可以正常打印 } console.log(username); /
v-bind能给元素动态绑定属性 img中的src在大多数情况下都是动态传递过来的数据，并非是写死的，这时就需要用v-bind的语法，做src属性的动态绑定。 在需要动态绑定的属性前加上v-bind:，告诉Vue这个属性我需要动态绑定。
输出output，查看loader配置 vue inspect > output.js
158 万周活跃用户（通过 devtools 插件来统计），940 万的月下载量。
官方称之为 自定义属性 ,但我比较习惯叫它 变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性.
例如以下实例，我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应。
我们开发 Vue 项目时，一般会使用组件库进行开发，组件库有两种加载方式：全局引入和按需引入
就是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。 全局变量专用模块 Global.vue
本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点：
在使用vue开发SPA应用中，我们经常需要在一个或多个scss文件中定义公共变量或者mixin亦或是很多通用的function，而且不希望在每个vue文件中都去@import，针对这种情况，可以使用下面的方法添加全局引入的sass文件，使这些样式或者方法可以被打包到全局的样式文件中。
在现在的前端开发中，前后分离、模块化、版本控制、文件合并与压缩、mock数据等，是在大前端开发避不开的概念。在开发的时候，以组件的方式分别开发，在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中，这样的模块化方案一直是前端架构师在解决和优化的焦点之一。
npm i vue vue-loader vue-template-compiler cross-env css-loader style-loader url-loader file-loader html-webpack-plugin webpack-dev-server
vue3.2 到底更新了什么？ 根据原文内容的更新的内容主要有以下 5 块： 1.SSR：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建， 与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能， 比如(Workers、Service Workers) 2.New SFC Features：新的单文件组件特性 3.Web Components：自定义 web 组件。这个我们平时很少用到，但是应该知道 4.Effect Scope A
vue3.2 到底更新了什么？ 根据原文内容的更新的内容主要有以下 5 块： 1.：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建， 与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能， 比如(Workers、Service Workers) 2.New SFC Features：新的单文件组件特性 3.Web Components：自定义 web 组件。这个我们平时很少用到，但是应该知道 4.Effect Scope API：e
vite是尤大大开发的一款意图取代webpack的工具。其实现原理是利用ES6的import发送请求加载文件的特性。拦截这些请求，做一些编译，省去webpack冗长的打包时间。并将其与Rollup捆绑在一起用于生产。在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器，浏览器通过本机<script module>支持对其进行解析，从而为每次导入发出HTTP请求。开发服务器拦截请求，并在必要时执行代码转换。例如，对*.vue文件的导入会在发送回浏览器之前即时进行编译。
v-on:事件="变量" 、 @事件="变量" 、@事件="变量()" 、 @事件="变量($event, ...)"
我们每天写的vue代码都是写在vue文件中，但是浏览器却只认识html、css、js等文件类型。所以这个时候就需要一个工具将vue文件转换为浏览器能够认识的js文件，想必你第一时间就想到了webpack或者vite。但是webpack和vite本身是没有能力处理vue文件的，其实实际背后生效的是vue-loader和@vitejs/plugin-vue。本文以@vitejs/plugin-vue举例，通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的，看不懂你来打我。
本瓜所在的项目组技术栈主要是 Vue2，平常又疏于 CSS 探究，对 JSX 里融合写 CSS 这种全面组件化的写法了解不多。
1、异同：1）简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号
Getting Started | BootstrapVueGet started with BootstrapVue, based on the world’s most popular framework – Bootstrap v4, for building responsive, mobile-first sites using Vue.js
CSS不仅仅是一门科学，而是一门艺术。 您可以了解选择器的每种组合，并且可以成为每种样式属性的专家，但是仍然无法根据需要布置和样式化网站。
h2内的标签中test就是由vue中传的msg变量的值,但是其中html标签不会被解析
现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家可根据需求综合分析得出一套适用的方案。
事情就发在昨天，在我们单位的办公大厅里，有一个产品向我走来。他主动介绍自己，他对我说，“老骥： 你这个页面有问题，很大很大的问题，现在我是特地来告诉你，对我来说，还得辛苦你给我解决问题”
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
