vue3 echart组件封装-编程思维

项目中用到了很多echart图表,进行了简单的组件封装,主要包含以下功能: 创建图表实例,渲染图表 支持传入自定义函数,可拿到图表实例,实现个性化功能 支持配置更新后图表自动刷新,可配置是清空后再刷新 loading状态控制 resize时图表更新 支持饼图默认高亮功能 实现 资源引入 echart资源按需引入 第三方组件引入(echarts-liquidfill,水波纹图表) /* 即

vue框架设计:性能权衡的艺术-编程思维

“框架设计里到处都体现了权衡的艺术。”   当我们设计一个框架的时候,框架本身的各个模块之间并不是相互独立的,而是相互关联、相互制约的。因此作为框架设计者,一定要对框架的定位和方向拥有全局的把控,这样才能做好后续的模块设计和拆分。同样,作为学习者,我们在学习框架的时候,也应该从全局的角度对框架的设计拥有清晰的认知,否则很容易被细节困住,看不清全貌。   另外,从范式的角度来看,我们的框架应该设计

适用于小白:vscode搭建vue项目,最详细的搭建步骤哦-编程思维

在vscode上搭建一个vue项目---初学总结。 1.假设Vscode、nodejs等已经安装好了。 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目。 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框。点击终端-新建终端,输入上述命令,回车,等待安装完成。     3.安装webpack,它是打包js的工具 安装命

vue-element-admin iframes 组件 保留 iframe 操作状态-编程思维

由于没有时间去维护这个功能,这个仓库我暂停了,当前博客内容和代码只作为实现思路参考   代码贴前面,gitee地址:https://gitee.com/chkhk/vue-element-admin 可以自行拉到本地运行看看效果 预览效果,可以拉到文章最底下看 GIF   起因 最近做的后台管理系统,用的是 vue-element-admin 的框架。   然后又有嵌入其它系统页面的需求,一开始

vuecli 自动转换小文件为 base64 格式,如何关闭?-编程思维

1. 问题 最近在写 vue 项目时,发现稍微小一点的静态资源,例如字体文件, 图片都被自动转换为 base64 格式了。 在网上搜索时基本都是去配置 url-loader ,配置后提示:Can't resolve 'url-loader'。看了依赖文件中并没有 url-loader 这个库。 2.原因 目前最新的 vue-cli 版本是基于 webpack5 的,在 webpack4 的时

2024年1月java项目开发指南16:用户自由选择字段查询、是否模糊查询-编程思维

我们希望用户可以自己控制是否要模糊查询 用户可以自由的选择字段去查询。 如上图,我在前端页面准备了 多选框:决定是否模糊查询。(True or False) 下拉选择框:决定要查询关键词的所属字段 输入框:决定关键词 按钮:发起请求 肯定要传参数的,所有这个接口请求方式设置为Post。考虑到方便接收参数,我们使用post的param方式传参(不了解这个的可以看我之前的笔记 https://

element利用image-viewer组件实现大图预览和图片动态加载-编程思维

element的el-image组件支持大图预览模式,但需要和小图模式配合使用,项目中刚好有需求需要直接使用大图预览并且需要支持图片的动态加载,研究了一下el-image组件的源码发现el-image组件是通过引用image-viewer组件实现的大图预览的,刚好可以利用一下! image-viewer属性 urlList: 图片列表,数组类型 onSwitch: 图片切换事件 onC

vue 响应性-编程思维

一、响应性原理  数据模型 是被代理的 JavaScript 对象。而当你修改它们时,视图会进行更新。这让状态管理非常简单直观。 理解其工作原理同样重要,这样可以避开一些常见的问题。 1 什么是响应性? 响应性是 一种允许我们以声明式的方式去适应变化的一种编程范例。如excell。 js如何实现响应性 检测其中某一个值是否发生变化 用跟踪 (track) 函数修改值 用触发 (trigger)

vue 之 mixins (混入)-编程思维

Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。 什么时候使用Mixins  1. 页面的风格不用,但是执行的方法和需要的数据类似,我们是选择每个都写呢还是提取出公共部分呢?   基础实例 我们有一对不同的组件,它们的作用是切换一个状态布尔值,一个模态框和一个提示框。这些提示框和模态框除了在功能上,没有其他共同点:它们看起来不一样,用法不一样,但是逻辑一样。 // 模态框 c

vue 中slot-编程思维

插槽使用场景   - 该组件被多个地方使用 - 每个父组件中对该组件的内部有一部分需要特殊定制 - slot可以让我们更好的复用组件的同时并对其定制化处理 - 可以理解为父组件想子组件传递了一段 html 文本 要求: 1.子组件模板包含至少一个 插槽 <slot></slot> 2.父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 s

前端vue-编程思维

1、    export和export default的区别 export default xxx import xxx from './' export xxx import {xxx} from './' 在一个文件或模块中,export、import可以有多个,export default仅有一个通过export方式导出,在导入时要加{ },export default则不需要  

vue响应性原理-编程思维

  核心实现类 Observer : 它的作用是给对象的属性添加 getter 和 setter,用于依赖收集和派发更新 Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例(里面 subs 是 Watcher 实例数组),当数据有变更时,会通过 dep.notify()通知各个 watcher。 Watcher : 观察者对象 , 实例分为渲染 w

vue模板语法——v-cloak-编程思维

一、什么是指令 指令的本质就是自定义属性 指令的格式:以v-开始,比如:v-cloak 二、v-cloak指令用法 插值表达式存在的问题:“闪动” 如何解决该问题:使用v-cloak指令 解决该问题原理:先隐藏,替换好值后再显示最终的值 三、v-cloak指令的用法 提供样式 [v-cloak]{ display: none; } 在插值表达式所在的标签中

vue模板语法——v-once 数据响应式-编程思维

一、数据响应式 如何理解响应式 html5中的响应式:屏幕尺寸的变化导致样式的变化 数据的响应式:数据的变化导致页面内容的变化 什么是数据绑定 数据绑定:将数据填充到标签中 v-once只编译一次 显示内容之后不再具有响应式功能 二、v-once指令 v-once 应用场景 如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能。 v-once用法 在

在vs code中启动edge浏览器调试vue项目-编程思维

最近维护一个Vue 2.x的老项目,网上的资料介绍在VS中调试前端代码都是使用Chrome浏览器,但我没有装Chrome浏览器,想在VS Code中直接调试Vue代码,百度了很多资料,尝试了好几种方案,终于找到简单可行的方法。 根据微软官方的资料,如果想在VS Code中使用Edge浏览器进行调试,可以安装Microsoft Edge Tools for VS Code 插件,安装后可以打开一个

使用vue-office实现在线预览pdf word execel功能-编程思维

功能特色 一站式:提供docx、pdf、excel多种文档的在线预览方案,有它就够了 简单:只需提供文档的src(网络地址)即可完成文档预览 体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态 安装 docx文档预览组件 npm install @vue-office/docx [email protected] excel文档预览组件 npm install @vue-offi