前端
vuex和localstorage . cookie的区别
vuex是为了解决多组件之间的共享状态的一种状态管理模式, 强调集中式管理, 将所有的共享状态放在内存中, 读取速度快, 但是页面一刷新就恢复默认值了,
vuex的五大核心: state(存放数据的地方) , actions(发送异步请求), getters(类似于computed计算属性), mutations(更改状态的地方), modules(组件模块化) 。其中, 更改状态只能在mutat
第四节:React组件状态的State属性
1. State状态理解
关于state的理解
state 是组件对象中最重要的属性,值是对象(可以包含多个数据)
组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
state是组件实例的属性,函数组件没有实例,因为函数组件没有状态
state可以理解是组件自己的数据, props数据是外部传入,state数据就是组件自己的
2. State状态的使用
2.1
vue - 组件通信
1. props/$emit
适用范围: 适合父子组件之间, 组件层级嵌套太深, 使用该方法较为繁琐,不建议使用;
代码示例:
image.png
总结:
props中接收到的值可以直接展示,但不建议直接对齐修改;
如果父组件向子组件传递的值是通过接口获取的, 可能会存在延迟的情况;
2. provide/inject
适用范围: 适用于多层次组件嵌套,通过provi
在vite+vue中使用@originjs/vite-plugin-federation模块联邦
参考链接
webpack也有这个插件,比vite好用,vite不支持本地,必须要打包后开启服务才可以
先下载(只要用到的项目都需要进行下载)
npm install @originjs/vite-plugin-feder
可视化大屏项目适配 vue(方案一)
选择的适配方案
设计稿是1920px
flexible.js 把屏幕分为 10 等份 ( flexible.js 中可修改 ,默认为 10 )
image.png
新建 vue 项目,项目目录如下
image.png
src / assets 文件下创建一个新的文件夹 css, css 文件夹下新建一个base.css文件用于定义全局样式
html,
body,
css实现椭圆绕圈动画
1.实现效果
raoqiu.gif
2.实现原理
2.1 box-shadow
box-shadow属性可以设置一个或多个下拉阴影的框。
boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
语法:
box-shadow: h-shado