vue
文章平均质量分 68
maidu_xbd
核心算法+大量的重复实践
展开
-
vue---大文件分片上传
思路:将大文件切成小片异步上传可以解决大文件上传过慢的问题,但如果文件很大时,采用一次性异步上传,会在同一时间产生过多的请求,后端服务器处理不过来,导致请求异常。因此将文件切成小片后,再分组上传,比如一组10个切片,等待10个切片的请求上传完成后,再接着下一组,以此减轻对服务器的压力。原创 2023-06-05 12:06:33 · 2669 阅读 · 0 评论 -
实现图片懒加载的5种方式
offsetTop(图像距离顶部的高度)-scrollTop(页面被卷去的高度)原创 2023-05-24 23:10:41 · 6820 阅读 · 0 评论 -
vue---组件逻辑复用方法:Mixin/HOC/Renderless组件
下文通过表单校验来分别讲解Mixin/HOC/Renderless组件这三种方式。原创 2023-04-23 23:48:12 · 609 阅读 · 0 评论 -
vue---mixin混入
一个混入对象可以包含任意组件选项(如data、methods、created、mounted等等)。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 我们可以使用混入,向组件注入自定义的行为。和组件注册和指令一样 vue 提供了全局和局部注册mixin的mixin 函数。原创 2023-04-23 23:49:55 · 729 阅读 · 0 评论 -
vue---父子、兄弟、跨层级关系组件通信
父组件向子组件传递数据是通过props传递的。子组件传递数据给父组件通过自定义事件$emit触发来通知父级组件进行相应的修改。vue---父子传值:props与this.$emit()_vue获取父类属性值_maidu_xbd的博客-CSDN博客在vue中,属性props用来实现将父组件的数据传递给子组件。当父组件的属性变化时,将传递给子组件。父组件通过prop向子组件传递数据,子组件可以通过调用内建的$emit方法来触发一个事件$children(vue3废弃)原创 2023-04-23 19:53:13 · 1157 阅读 · 0 评论 -
vue---组件通信
组件间通信的三种方案:1、组件跨层级访问,2、依赖注入,3、透传(用于组件二次封装)原创 2023-04-23 15:05:07 · 332 阅读 · 0 评论 -
vue---双向绑定
vue 中的双向绑定是语法糖。vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。数据和视图同步改变。原创 2023-04-21 23:53:07 · 5251 阅读 · 1 评论 -
vue---自定义指令
什么时候我们需要去自定义一个指令呢?事件修饰符,很大的程度上我们是为了让我们的代码更加显得是数据驱动的以及可测试的,而将DOM操作的相关逻辑单独地委托出来,约定成一些特定的修饰符,为了保证methods方法只有纯粹的数据逻辑(和DOM解耦,易于单元测试),不去处理DOM相关的操作。当我们的methods中存在操作DOM的逻辑的时候,就该思考是否可以抽象成一个自定义指令。自定义指令作用:操作DOM2、自定义指令Vue.directive( ' 自定义指令名 ' , { } )参数一是指令的名字,原创 2023-04-21 18:05:08 · 424 阅读 · 0 评论 -
vue---[Vue warn] prop “defaultActive“. Expected String with value “1“, got Number with value 1.
问题描述:vue+element项目报错,vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". Expected String with value "1", got Number with value 1.如下图解决方法:产生上述报错原因是由于<el-menu> 标签default-active绑定的值为Number,绑定类型错误,应修改为String.原创 2021-09-25 12:24:18 · 2481 阅读 · 0 评论 -
vue---展示内容超过指定行数后展开收起功能
问题描述实现功能要求如下图解决方法思路:假设展示区域每行高度为a,当内容超出1行高度a时需要设置展开/收起功能。变量如下: list: [], //列表数据 listId: "", //当前选择的id listHeight: null, //列表区域的显示高度 listOpenFlag: false, //为true时,展开;为false时,收起 showListBtnFlag: false, //为true时,出现展开-收起;为false,不出行展开-收起给展示.原创 2021-08-08 16:11:19 · 6116 阅读 · 0 评论 -
vue---vue-element-admin项目npm install报错
百度试了一通,最终在这【https://www.jianshu.com/p/43f242f5c3bf】找到答案解决方法:在目录【src/router/modules/components.js】注释点markdown路由即可原创 2021-04-26 11:37:30 · 192 阅读 · 0 评论 -
vue---npm run serve报错Error: Cannot find module ‘core-js/modules/es6.regexp.constructor‘
报错信息:解决方法:cnpm install core-js@2原创 2021-04-14 20:41:51 · 836 阅读 · 0 评论 -
vue3+Typescript---Composition API(常用部分)学习笔记(二)
1、计算属性和监视(1)计算属性【computed函数】计算属性默认只有 getter,不过在需要时你也可以提供一个 setter。计算属性的 getter 函数没有副作用,它更易于测试和理解。//第一个姓名 只有getter的计算属性 const fullName1 = computed(() => { return user.firstName + "_" + user.lastName; }); // 第二个姓名 有getter与sette原创 2021-04-05 17:35:46 · 280 阅读 · 0 评论 -
vue3+Typescript---Composition API(常用部分)学习笔记(一)
https://composition-api.vuejs.org/zh/api.html1、创建vue3项目(1)使用vue-cli创建## 安装或者升级npm install -g @vue/cli## 保证 vue cli 版本在 4.5.0 以上vue --version## 创建项目vue create my-project(2)使用vite创建【npm init vite-app 项目名称】2、setupsetup是新的option, 所有的组合...原创 2021-03-31 23:30:02 · 687 阅读 · 0 评论 -
vue---vue-cli3 vue-cli4脚手架开发环境搭建
vue-cli3 vue-cli4脚手架开发环境搭建步骤如下1、nodejs安装nodejs---win7 nodejs安装与卸载2、安装vue-cli3或4全局安装过旧版本vue-cli(1.x 或 2.x)要先卸载【 npm uninstall vue-cli -g 】,未安装则跳过此步。安装vue-cli最新版本【npm install -g @vue/cli】,安装完成后查看当前版本,确保安装成功:【vue --version】或【vue -V】安装指定版本【npm ...原创 2020-12-28 22:35:31 · 582 阅读 · 0 评论 -
vue---vue-cli不同版本的安装及对比
1.vue-cli不同版本对比 条目 vue-cli 1.x / 2.x vue-cli 3.x / 4.x 包名称 vue-cli @vue/cli 全局安装 npm install -g vue-cli 安装指定版本npm install -g vue-cli@版本号 npm install-g @vue/cli..原创 2020-12-27 01:28:14 · 2043 阅读 · 2 评论 -
vue---vue-cli使用mockjs的几种方式
在vue-cli项目中使用mockjs模拟数据,主要存在以下几种方式1、直接在页面中引用mockjs生成随机数据<template> <div> <h1>直接使用Mockjs模拟数据</h1> <el-table :data="userList" border style="width:600px" stripe size="mini"> <el-table-column prop="username原创 2020-12-23 11:03:13 · 422 阅读 · 0 评论 -
vue---vue-cli项目使用mockjs模拟数据
目录一、mockjs介绍二、vue-cli项目使用mockjs模拟数据一、mockjs介绍mock.js可以用来生成随机数据(文本、数字、布尔值、日期、邮箱、链接、图片、颜色等),拦截Ajax请求,让前端项目可独立于后端进行开发。具体介绍见【http://mockjs.com/】(1)mockjs语法规范数据模板定义:数据模板中的每个属性由 3 部分构成:属性名name、生成规则rule、属性值value。属性名 和 生成规则 之间用竖线 | 分隔,生成规则 是可选的。 .原创 2020-12-20 19:32:36 · 505 阅读 · 0 评论 -
vue---el-upload使用FormData多文件同时上传
需求:FormData 数据形式为键值对,数据可通过XMLHttpRequest.send()方式发送出去FormData.append(key,value):向FormData对象中添加一个键值对,如执行FormData.append(key1,value1)后FormData.append(key1,value2),key1对应值value1不会被覆盖,而是新增对应值value2FormData.get(key):返回FormData对象中给定key对应的第一个值FormDa..原创 2020-12-05 17:15:56 · 9917 阅读 · 1 评论 -
vue---vue使用原型链存储数据,实现定时向后台发送请求
问题描述:当后台进行一个比较费时的任务,比如前台创建爬虫任务,当创建完成后,后台进行数据爬取,爬取过程需要耗费一些时间。为了及时获知爬虫任务完成,前端需要定时向后端发送查询爬虫任务状态(爬取中或已完成)的请求,如果爬取状态为“爬取中”,则继续向后台发送查询状态请求;如果爬取状态为“已完成”,则结束该请示请求任务。解决方法:(1)使用原型链存储定时器相关数据:防止爬虫页面跳转到其他页面,再跳转爬虫页面时,数据被初始化的问题。在【main.js】定义变量timerArr,挂载在原型链上。//原创 2020-10-14 15:15:28 · 1113 阅读 · 1 评论 -
vue---使用vue-layer prompt弹框显示两个/多个input输入框
问题描述:使用layer.prompt弹框显示两个/多个输入框效果。实现效果截图如下:解决思路:通过控制台找到prompt弹框中的input输入框的class,往其前插入HTML代码(jquery写法【$(".class").before("HTML代码")】)注意:prompt默认确定按钮在取消按钮的坐标,如果想让确定按钮放在后面,设置确定按钮样式为【float:right】完整代码:<template> <div> <h1>vue-l原创 2020-09-07 21:31:06 · 16230 阅读 · 0 评论 -
vue---安装使用vue-layer弹框插件
vue安装使用vue-layer弹框插件步骤(1)安装vue-layernpm install --save vue-layer(2)在【src】目录下的【main.js】中引入vue-layerimport layer from "vue-layer";import "vue-layer/lib/vue-layer.css";Vue.prototype.$layer = layer(Vue, { msgtime: 3 //目前只有一项,即msg方法的默认消失时间,单位:秒})原创 2020-09-07 21:12:56 · 1306 阅读 · 0 评论 -
vis---vue实现network扩展节点功能
需求描述:双击某节点,展开节点。 解决方法:数组【nodeExtendArr】表示已扩展的节点,监听节点双击事件,当节点双击时,判断该节点id是否存在数组【nodeExtendArr】中:【if(this.nodeExtendArr.indexOf(id)!=-1){...}else{....}】完整代码:<template> <!-- 动态扩展节点 --> <div> <!--width,height 画布的宽...原创 2020-08-09 20:31:27 · 3910 阅读 · 0 评论 -
vis---vue实现network节点圆环形工具栏项功能
实现效果图:当鼠标点击节点时,出现圆环选项,具备删除节点和编辑节点功能,点击删除icon可实现删除节点功能,点击编辑icon可实现编辑节点功能。解决思路:(1)圆环形工具栏实现:关键在于定位,当点击节点时,使用【this.network.getPositions(e.nodes[0])】获取鼠标点击的位置;使用【this.network.getScale()】获取缩放尺寸;【this.network.canvasToDOM({x:p[nodeId]["x"],y:p[nodeId][...原创 2020-08-09 18:02:45 · 2308 阅读 · 2 评论 -
vis---network网状拓扑图展示
vis.js官网【https://visjs.org/】vis.js network作用:用于显示动态的,自动组织的,可自定义的网络视图。如下图:vis.js network使用:(图中案例使用vue实现,具体实现步骤如下)第一步:引入文件安装【npm inatall vis --save】,在【main.js】中引入【import"vis/dist/vis.css";】,在展示网络拓扑图的页面引入【importVisfrom"vis";】第二步:定义dom首先在html...原创 2020-08-09 17:10:57 · 5555 阅读 · 4 评论 -
vue---新增用户之拍照或本地上传照片
功能展示:点击【添加用户】按钮弹出对话框如图,头像上传分为两种方式(1)本地上传(2)打开摄像头拍照上传。最多可上传三张照片,当超过三张,则提示“只能上传三张照片”,如对选择的照片不满意,可将鼠标移入图片,图片右上角即出现红色删除图标,点击删除图标即可删除当前选中的照片。 一、本地上传二、打开摄像头拍照上传完整代码:<template> <div> <el-button type="primary" size="mini"...原创 2020-07-28 16:04:22 · 1646 阅读 · 1 评论 -
vue---element el-upload批量导入案例
问题描述:点击【批量导入】按钮弹出批量导入对话框,实现模板下载及文件导入功能;解决步骤:(1)批量导入按钮 <el-button type="warning" icon="el-icon-upload2" size="mini" @click="batchAddGraph">批量导入</el-button>(2)点击按钮,弹出对话框(3)上传文件,下载模板相关方法 // 以下是批量导入的方法 // 下载模板 downloa原创 2020-07-27 21:35:17 · 898 阅读 · 0 评论 -
vue---element实现动态渲染form表单数据,动态添加数据
效果展示:功能描述: 1.动态渲染form数据:动态从后台获取form数据,表单的label不固定,label和label对应的值均从后台获取,动态渲染label和label对应的值。 Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。具体说明见Object.keys()2.动态删除属性:可删除属性(此处id和name属性不能删除,所以输入框后不出现删除按钮)。3.动态添加.原创 2020-07-18 16:56:47 · 15935 阅读 · 3 评论 -
vue----el-form-item动态生成表单名称和表单内容项
需求描述:由于后台返回的json对象中的key(属性)值不都是一样的,所以要求动态的把json对象中的key(属性)返显到表单的label,json对象中的value(值)返显到表单的input里。如左图的json对象,动态生成表单如右图。 解决思路:①将json对象的key(即属性)转化为一个数组:Object.keys();②利用v-for遍历key组成的数组,取到所有的key;③使用nodeForm[key]取到对应的value知识点:Object.keys()...原创 2020-07-01 18:42:08 · 4851 阅读 · 2 评论 -
vue---vis.js动态加载图谱之unshift踩坑记
问题描述:用vue做一个类似于如下图的neo4j的图谱管理系统,当每一次点击左侧标签时,往右侧搜索框下的顶部位置插入一个图。解决方案:图谱数据通过数据驱动【<divclass="graph"v-for="(item,index)ingraphData":key="item.index">...</div>】当每一次点击左侧标签时,往右侧搜索框下的顶部位置插入一个图,即在graphData中顶部插入一条数据【this.graphData.unshift(dat...原创 2020-06-26 21:50:04 · 1571 阅读 · 7 评论 -
vue---v-for为不同item设置不同的样式
要求:为每一条数据设置不同的样式,以背景颜色为例,希望每一个类别的背景颜色不一样。关键:<template> <div> <ul> <li :class="'bgColor'+(index+1)" v-for="(item,index) in tagsList" :key="item.id">{{item.name}}</li> </ul> </div></t原创 2020-06-26 20:48:45 · 1628 阅读 · 0 评论 -
vue---nextTick的理解总结
首先附上官网学习地址:https://cn.vuejs.org/v2/api/index.html#Vue-nextTickVue.nextTick( [callback, context] )在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。例子展示:<template> <div> <button @click="changeMsg">改变msg</button>原创 2020-06-25 00:47:38 · 171 阅读 · 0 评论 -
vue---给li标签设置active选中样式
关键点:添加【:class="active==index?'isActive':''"】具体见下图:在data中,设置active初始值为-1【active:-1】原创 2020-06-24 11:48:03 · 4365 阅读 · 0 评论 -
vue---vis实现复杂网状关系图显示
vis.js是基于浏览器的动态可视化库。能够处理大量的动态数据,实现对数据的操作和交互。首先,贴上一个很好的vis.js参考文档:https://yajunfan.github.io/vis/#/module案例效果如图(1)安装【npm inatall vis --save】(2)引入:在【main.js】中引入【import"vis/dist/vis.css";】,在展示网状图的页面引入【importVisfrom"vis";】(3)实现网状图实现:首先在html....原创 2020-06-16 17:07:34 · 8610 阅读 · 6 评论 -
vue---style scoped属性的作用和原理、scoped穿透
使用vue开发项目时,发现style标签中存在一个属性scoped。scoped 属性是 HTML5 中的新属性,是一个布尔属性。如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。作用:实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。原理:scoped会在DOM结构及css样式上加上唯一性的标记【data-v-something】属性,即CSS带属性选择器,以此完成类似作用域的选择方式,从而达到样式私有化,不污染全局的作用。scope原创 2020-05-26 18:13:50 · 16683 阅读 · 3 评论 -
vue---兼容ie遇到的坑,Unhandled promise rejection NavigationDuplicated/Unhandled promise rejection error
说到兼容ie,真是跟ie浏览器斗争到底呀,真的是不喜欢用ie浏览器,chrome多好。辛酸,可是也不能不去解决它!出现问题如下:当发送后台请求时,ie控制台报错问题1.Unhandled promise rejection NavigationDuplicated问题2.unhandled promise rejection error:Request failed with status code 400(人家chrome浏览器可没这么多问题)解决方法:问题1解决方法:在.原创 2020-05-21 15:38:42 · 10080 阅读 · 5 评论 -
vue---vue项目在ie浏览器显示空白解决方法(安装babel-polyfill )
问题描述:使用vue-cli脚手架搭建的项目,【npm run dev】运行,在chrome下显示,ie下显示空白。解决方法:1、安装babel-polyfill :【npm install babel-polyfill --save-dev】2、安装完成后,可以在【package.json】中看到安装的版本信息。在【main.js】中引入babel-polyfill 3 3、在【build】目录下【webpack.base.conf.js】中找到【entry】,修改配置如下:...原创 2020-05-21 14:56:36 · 4375 阅读 · 2 评论 -
vue---el-table设置表头居中,内容列居中/左对齐/右对齐
问题描述:如图,要求设置表头居中,第一列,第二列内容居中,第三列内容左对齐。解决方法:统一设置设置表头居中【:header-cell-style="{'text-align':'center'}"】统一设置设置内容列居中【:cell-style="{'text-align':'center'}"】...原创 2020-05-14 23:18:28 · 31022 阅读 · 1 评论 -
vue---el-select同时获取label和value值
问题描述:同时获取下拉选项的label和value值解决方法:方法一 selectChange(val) { var obj = {}; obj = this.options.find(function(item) { return item.value === val; }); console.log("label为", obj.label, "value为", val); },方法二 <e原创 2020-05-13 20:19:37 · 5156 阅读 · 2 评论 -
vue---echarts随着窗口缩放自适应
方法1:方法2:把上图红框中的替换为【window.onresize=myChart.resize;】原创 2020-05-13 19:56:56 · 1279 阅读 · 0 评论