- 博客(16)
- 收藏
- 关注
RSS订阅原创 vue 中主题切换 写法之一
vue 中主题切换 写法之一方法一在全局scss样式中 定义颜色// 备注这里的颜色就是设置你想要的全局颜色也就是默认的颜色:root{ --tc: #003c9d;}$tc: var(--tc);然后在结构中background: var(--tc);切换变更就是在js方法中 定义新的颜色 // js函数中改变`--tc`的值 document.body.style.setProperty("--tc", "#009FCC"); // js中获取`--tc`的
2022-05-11 09:47:30
332
原创 element中 el-dropdown 实现切换数据和触发事件处理
element中 el-dropdown 实现切换数据和触发事件处理我的实现功能是 主题切换时候的 菜单下拉,可以切换value和可以获取到菜单切换时的触发事件话不多说上代码结构// 备注 这里的@command 就是触发事件 <el-dropdown @command="changeValue" class="ts_class"> <span class="el-dropdown-link"> {{ value }}<i class
2022-05-10 14:03:45
2003
1
原创 vue中 父子组件之间的传值
vue中父子组件之间的传值子组件想父组件传值父组件中<TrayView @tray-list="trayArrList" ref="trayRules"></TrayView>子组件中this.$emit("tray-list", this.trayData)父组件中的使用trayArrList(item) { // 接收的值是item(this.trayData) console.log(item)}// 如果想接收子组件中的方法 使用ref 来接收 r
2022-04-28 18:14:07
220
原创 element中 form 表单验,验证数组中的每一个form表单
element中 from 表单验,验证数组中的每一个form表单使用场景: 每点击一次就新增一个form表单,并且校验添加的所有的formhtml 结构 <div v-for="(itemList, index) in trayData" :key="index" class="tray_line box" > <el-form :model="i
2022-04-27 14:11:15
703
原创 AntV X6 流程图
安装 AntV X6npm install @antv/x6 --savehtml结构<div class="editor" ref="editor" style="height: 400px"></div>js结构 initEditor() { // 获取容器的宽高 const { clientHeight: height, clientWidth: width } = this.$refs["editor"]; c.
2021-11-15 09:53:37
2960
原创 vue 项目优化解决方案都有哪些
1.使用 mini-css-extract-plugin 插件抽离 css2.配置 optimization 把公共的 js 代码抽离出来3.通过 webpack 处理文件压缩4.不打包框架、库文件，通过 cdn 的方式引入5.小图片使用 base646.配置项目文件懒加载7.UI 库配置按需加载8.开启 Gzip 压缩...
2021-11-01 14:23:04
255
原创 vue项目优化（全）
减少页面加载的方式减少调用其他页面，文件的数量使用CSS格式时，背景图载入图形文件压缩JavaScript ，CSS 代码在文件头部放 CSS样式在文件尾部放 JS 脚本CSS, JavaScript 改由外部调用其他优化方式v-if 和 v-show ， 尽量使用v-show使用 object.freeze() 方式 冻结data中的属性，从而组织数据劫持组件销毁的时候会销毁的不干净，需要手动去销毁，所以一个组件销毁的时候需要手动去，removerEventListe
2021-09-03 10:54:13
131
2
原创 hash和 history 区别
hash模式和history模式的区别区别：hash模式url 带 #号history 模式不带#号hash 地址栏 url有变化不会重新加载页面不会向后端发送请求history 则相反，没有对应的页面就会出现404但是在history下 你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会刷新出来404页面原理hash 模式依赖的是 onhashchange() 时间去监听的 ，location.hash的变化history：利用了HTML5，Histor
2021-09-03 10:38:31
161
原创 js 获取时间，日期， 以及星期几
引入 moment.js 这个插件第一步下载npm i moment --save第二步引入项目中main.js引入:import moment from 'moment'Vue.prototype.$moment = momentvue页面中 <div class="full-header-left_title"> {{ currentTime }} {{ daysCurrent }} </div>
2021-09-01 15:55:37
291
原创 Echaets中折线图实现数据实时加载（动）
安装echartsnpm install echarts -S引入echarts 在main.js中import echarts from 'echarts'Vue.prototype.$echarts = echartsHTML结构 <div id="main" style="width: 750px;height:400px;"></div>js部分export default { name: "power", data() { retur
2021-09-01 15:35:11
543
原创 自动化部署路由
自动化部署路由//自动化部署const requireComponent = require.context('../page/contentViews', true, /\.vue$/);const content_views_routes = requireComponent.keys().map(fileName => { // 获取组件配置 const componentConfig = requireComponent(fileName); // 剥去文件名开头的 `./` 和结
2021-08-30 14:24:11
89
原创 WebSocket 实时推送数据用法
什么是websocketWebsocket是应用层第七层上的一个应用层协议，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。即：websocket分为握手和数据传输阶段，即进行了HTTP握手 + 双工的TCP连接。用法// 初始化一个 scoket 建立连接 init() { if (typeof WebSocket === "undefined") { alert("您的浏览器不支持socket");
2021-08-30 13:51:28
1501
原创 服务器和客户端三次握手和四次挥手
三次握手是建立连接为了简历安全连接 带着sck seq 跟服务器进行交流第一次是告诉服务器我来了，要建立连接第二次是服务器告诉我他收到请求了，可以准备连接了第三次是我告诉服务器，进入连接四次挥手是断开连接首先是客户端向服务器发送一个FM包，服务器收到后，向客户端发送有个确认的收拾 进入 close_wait状态，然后客户端收到ACK 包后 进入 fin_wait2 状态，然后服务器端再吧自己剩余没传完的数据发送给客户端。发送完毕后在发一个Fin+ ACK包，进入Last_ack(最后
2021-08-30 13:40:08
173
原创 vue中 key 的作用
key 的作用key 主要是用在虚拟dom中，每个虚拟的节点Vnode 有一个唯一标识key，通过对新旧的key来贩毒案节点是否改变，用key就可以大大提高渲染效率，这个key 类似于缓存中的 etagfor 循环中的key作用以便于更好的跟踪每个节点必须是string 和 number 类型必须具有唯一性，注 id不可以是index，因为不唯一，index是会变的...
2021-08-30 13:25:25
345
原创 什么是跨域
浏览器不能执行其他网端的脚本，同源策略造成的解： 1. jsonp 跨域json 是返回一串字符串，jsonp是返回一个脚本（包括函数），jsonp 不支持post 只支持get请求2. Nginx 反向代理3. PHP端修改header① 允许所有来源访问② 允许访问的方式Vue 中 开发环境下调佣接口 如何避免跨域在vue.config 目录下 proxyTable 项 进行如下配置...
2021-08-27 14:55:06
776
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人