【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目-编程思维

  最近更新了webpack配置详解,可移步vue-cli webpack详解   对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可。但是,这并不算是一个完整的vue实际应用。在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言,这些

vue.js之初印象-编程思维

一、背景 MVVM模式,很多人在说在用,好吧,我落后了,我目前的项目木有用到MVVM模式的框架,vuejs,reactjs,angularjs,nonono,自己去捣鼓过ng,项目木有用到。实在不敢称自己是front-end developer。趁这个失业期,vuejs的学习起哟。 二、简介 1、vue.js是什么 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和

光标自动定位到起始位置contenteditable="true" ,v-html绑定内容,div可编辑时,光标移到最前面-编程思维

出现这个问题原因: (1)通过打断点可以看到,当你输入的时候触发input事件,提交值给父组件中的v-model; (2)但因为在子组件中又监听了v-model的值,所以整体形成了闭环; (3)还需要重点说明的是光标问题,contenteditable与v-html所在的元素值的改变如果不是通过输入而是通过赋值实现,光标就会跑到最前面; 所以以输入中文为例,你刚打了一个字母,立马就触发了监听与变

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则不需要