Angular Vue React 框架中的 CSS

框架中的 CSS

Angular Vue React 三大框架

Angular Vue 内置样式集成

React 一些业界实践

Angular

Angular . js (1.x):没有样式集成能力

Angular (2+):提供了样式封装能力  2.与组件深度集成

ShadowDOM(谈一谈神奇的ShadowDOM):1.逻辑上一个DOM  2.结构上存在子集结构

Scoped CSS (Scoped CSS规范):1.限定了范围的CSS 2.无法影响外部元素 3.外部样式一般不影响内部 4.可以通过 /deep 或 >>> 穿透

达到封装效果:模拟 Scoped CSS  方案1.随机选择器(不支持)2.随机属性  <div abc>----div[abc]{ }

Angular 中加载 css 方法

Vue

模拟 Scoped CSS  方案1.随机选择器 css modules  2.随机属性  <div abc>----div[abc]{ }

参见:详解在Vue中有条件地使用CSS类

在Vue中使用样式

React (React入门教程

官方没有集成方案

社区方案:1. css modules (需要自己编译,将 class name 放到结构中) 参见博客

2.(babel) react-css-modules (正常写 class 即可)

3.styled components (将组件和样式封装到一起,变成带有样式的组件)

4.styled jsx (直接在 jsx 中写样式,简单粗暴)

参见博客:react 中 css 的使用    定义组件和css样式

react中书写css的三种方式    React.js中的CSS使用

上一篇:linux if 判断字符串是否相等


下一篇:2018-2019-2 20165205 网络对抗技术 Exp9 Web安全基础