![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 62
墨水白云
学如才识,不日进,则日退。
展开
-
vue3中替代vue2中央事件总线(new Vue)的方式记录
Vue3推荐使用mitt进行组件通信的步骤原创 2021-09-09 17:19:07 · 1823 阅读 · 1 评论 -
vue[$attrs的用法探究]
vue[$attrs的用法探究]https://www.ucloud.cn/yun/6841.html原创 2021-03-16 16:20:10 · 243 阅读 · 0 评论 -
vue[use()方法的使用与含义]
vue[use()方法的使用与含义]原创 2021-03-16 16:00:02 · 355 阅读 · 0 评论 -
vue[浏览器打印操作的插件收集及使用心得]
关于打印工具选择的问题关于打印分页关于打印比例与横纵关于打印样式问题原创 2020-12-14 14:25:23 · 2303 阅读 · 0 评论 -
vue[前端js操作进行excel导入导出的插件收集与使用]
最近在一个项目中遇到了要前端来对表格数据进行导入和导出相关的操作。然后第一印象就是要到网上找个比较靠谱而且使用多的npm插件来用用。找了许久,发现了几款不错的插件以及一些原生的方式,现在记录下来。原创 2020-12-11 16:30:07 · 2110 阅读 · 0 评论 -
vue[分享一个cron表达式生成插件]
目标前端进行各种操作之后,最终生成两个cron表达式,分别为开始时间和结束时间的cron表达式,且结束时间表达式的时间必须在开始时间之后,并且符合cron表达式的规则。任务类型有:一次性任务 和 循环任务两种一次性任务只需要选择任务周期,即任务的开始时间和结束时间,其范围可以是秒段,分段、时段、日段、月段、年段。循环任务需要选择周期类型,分别为周期类型:秒、分、时、日、周、月、年。根据不同的选择要默认生成一些自带的内容...原创 2020-09-15 14:54:57 · 5200 阅读 · 2 评论 -
vue[打包chunk-vendors.xxx.js文件过大,vue项目性能优化解决方案,前端性能优化知识总结]
虽然看上去这个内容也就2M左右的大小,但是在线上却出现需要加载10几秒的时间,这对于一个项目来说是非常的有问题的。因此解决方式如下:首先得知道为什么这个文件比较大,chunk-vendors.xxx.js是一个保存着各种相关依赖的关系的文件,比如导入的elmentUI、echarts、vue、vue-router等各种依赖解决方案:1.开启Gzip压缩2.路由懒加载3.检查图片等大小,看看能不能对加载的图片进行优化// 使用webpack-bundle-analyzer检查打包加载的各种依赖大.原创 2020-09-09 11:07:47 · 27211 阅读 · 1 评论 -
vue[文件上传Required request part ‘file‘ is not present]
问题发现文件上传出现:Required request part ‘file’ is not present 这个错误且后端接口通过postman能够请求成功,但前端怎么也上传不成功,明明配置好了请求头而且数据也放置在了data中如:问题解决通过FormData进行文件数据的封装保存,然后直接放入data中即可问题展示:文件上传接口请求格式无误,通过Postman能够上传然而请求头Content-type格式和请求权限都配置好了,然后body中放置了内容,然后报错使用axios配原创 2020-07-29 11:46:42 · 20655 阅读 · 4 评论 -
vue[高德地图绘制多边形以及保存重绘操作]
最近有个需求,要求在高德地图上能够自由的绘制区块,然后这个区块能够自由的控制边框、透明度、背景色等,绘制完毕之后保存起来,然后在另一个页面进行重新绘制并且添加上对于的点击事件。代码记录本例中有两个vue组件代码,第一个组件仅保存相关操作,第二个组件用于操作地图。index-map.vue用于保存操作<template> <div class="index-map"> <div class="func-line"> <div>原创 2020-07-03 11:48:36 · 5152 阅读 · 3 评论 -
vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容。看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划来记录车辆的行车点位集合,然后通过点位集合复原成一条自定义的路线。因此这里对该内容做下日常的整理记录。...原创 2020-07-01 13:33:48 · 7223 阅读 · 2 评论 -
vue[关于修饰符的统一整理]
在vue中修饰符的主要目的是为了解决一些原生DOM事件中的一些细节问题以及一些常规的内容优化问题。因此了解修饰符在特定情况下的作用还是有必要的,这能提高不少的开发效率。修饰符的类型修饰符在不同的内容上有着不同的修饰作用,因此针对的内容也会有所不一样。1.事件修饰符 6个事件修饰符通常 应用于各种通用事件,如click、change等。常用的有:.stop ------ 阻止事件冒泡.prevent ------ 阻止默认事件(如表单提交、a标签跳转).capture -原创 2020-06-30 11:17:03 · 160 阅读 · 0 评论 -
vue[混入功能的探索学习]
vue中的混入功能其最主要的目的是为了提取组件之间的通用代码,维护组件之间的关联,这个功能不会用也不会影响开发,但是如果会用混入,会让开发变得更加的快捷。混入的几点总结:第一点:混入仅仅针对组件中的 script 标签所包裹的内容。且本身内容为js相关内容。如:var mixin = { data(): {return{}}, computed:{}, watch:{}, methods:{}, created(){}, ......}可以看出混入的选项内容和组件的scr原创 2020-06-29 17:10:37 · 258 阅读 · 0 评论 -
vue[组件以及.vue组件文件的相关整理]
在一个vue项目中,我们想要进行开发,首先需要认识的便是带有.vue后缀的文件。本文记录.vue组件的相关内容。一个.vue后缀的组件所包含的常用信息.如下:补充:vue.extend和vue.component的区别每一个.vue后缀的组件可以理解为都是通过Vue.extend来实现的.然后通过路由来实现导航注册.Vue.extend 返回的是一个“扩展实例构造器”,也就是一个预设了...原创 2020-06-28 16:26:35 · 509 阅读 · 0 评论 -
vue[过渡与动画内容][整理记录]
vue中过渡与动画的核心在于 transition 组件transition 组件包裹的最外层元素必须出现以下四种控制属性之一才能执行过渡效果条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点transition 组件的常规三种使用方式:第一种:自定义6种transition css类组件示例如下:<template> <div class='box'> <button v-on:click="show = !show原创 2020-06-28 17:39:43 · 241 阅读 · 0 评论 -
vue[为什么data是一个函数]
为什么data是一个函数呢?最直接的说法就是为了让每个组件中的data的变量都拥有其作用域以便限制其影响其他组件。而这里对这个内容做一些更深层次的探索。原创 2020-06-16 10:46:58 · 198 阅读 · 0 评论 -
vue[插槽][一文认识插槽的使用]
vue[插槽]原创 2020-06-05 17:31:59 · 179 阅读 · 0 评论 -
vue[省市区三级联动通用组件]
vue[省市区三级联动选择]原创 2020-06-02 15:27:39 · 764 阅读 · 2 评论 -
vue[elementUI导航切换以及路由router-link、router-view、router的使用]
vue[导航切换router-link、router-view、router的使用]原创 2020-06-02 14:45:54 · 12190 阅读 · 0 评论 -
vue[自定义tab切换功能]
vue自定义tab切换的功能需要考虑到vue数据分离的特殊形式,但是其实现方式并不难。代码示例:<template><div> <div class="tab"> <div class="tab-item" :class="isTabActive == 0 ? 'is-active' : ''" @click="clickTab(0)">消火栓</div> <div class="tab-item" :class=原创 2020-06-01 14:22:10 · 864 阅读 · 0 评论 -
vue[强制刷新组件之$forceupdate、v-if、key属性三种方式的适用]
有时候我们会遇到一些问题,例如:弹出框在填写完毕后隐藏,然后再次点击打开的时候内容确还是原来的,此时需要刷新组件来操作。又或者有些时候我们需要强制触发组件的刷新以便于让整个组件的生命周期得以重新执行。本例探讨强制刷新组件的操作。第一种方式:...原创 2020-05-28 14:44:07 · 9960 阅读 · 2 评论 -
vue[高德地图自定义InfoWindow弹出框中@click事件问题]
vue[高德地图使用自定义InfoWindow事件]原创 2020-05-27 17:05:39 · 8179 阅读 · 12 评论 -
vue[高德地图的vue组件式开发]
地图在常规的vue项目中是一种比较常见的内容,通常我们只需要按照官方的文档示例以及api文档即可满足各种开发的需求,但是官方的文档示例通常都是直接在html文件中展现、js代码也是直接写在script中,然而vue式的开发却需要使用组件的形式,因此在结构上以及相关的方法与内容的定义上是有一定的区别的,因此这里记录vue组件式开发地图的一些常规操作。引入高德地图引入方式可以直接参照官方同步加载:在index.html中加上标签引入,然后在对应的组件中即可使用AMap对象。如:// 在index.htm原创 2020-05-27 16:12:23 · 906 阅读 · 0 评论 -
[Vue warn][runtime-only build of Vue where the template compiler is not available]
出现原因往往是因此在项目的代码中某些组件可能使用了vue.extend之类的构造器构建自定义内容之类的。解决方式,在vue.config.js这个文件中加上 runtimeCompiler: true,即可意思是开启runtimeCompiler编译模式...原创 2020-05-26 14:38:45 · 880 阅读 · 0 评论 -
vue[mqtt协议建立双向通讯]
vue[使用mqtt协议建立双向通讯]原创 2020-05-20 16:20:12 · 1468 阅读 · 0 评论 -
vue[官方脚手架使用]
vue[官方脚手架探究]原创 2020-05-18 16:54:39 · 486 阅读 · 0 评论 -
vue[父子之间、兄弟组件之间数据传递]
在vue的组件化系统中,我们最常遇到的一个问题就是组件之间的各种数据传递关系问题。因此解决数据传递的问题就是非常关键的问题。父子组件数据传递方式第一种方式:通过props和$emit配置的非绑定式数据传递这是一个非常通用且是官方推荐的父子数据传递方式。示例如下:父组件内容如下:子组件内容如下:这个数据传递方式的本质:父组件利用props属性向下传递数据,子组件利用事件系统$ emit向上传递数据。这个数据传递方式的核心操作:**1.**父组件中引入子组件,并且给子组件绑定传递过去的变量原创 2020-05-18 15:45:50 · 1459 阅读 · 0 评论 -
[vue warn]: Error compiling template 模板编译错误
模板编译错误:这种错误的产生往往在于对vue语法的使用错误问题。这里产生的原因:vue中双{{}}的使用一般放置在元素的标签之间当作内容变量使用,可以理解为放置在标签之间。例: <input type="text" :value="mycode.code"/>{{mycode.code}} , // 绑定属性的语法v-bind(: )而本错误为将双大括号放置在了元素标签的属性中。即:<input type="text" value="{{mycode.code}}"/>这样.原创 2020-05-18 15:25:13 · 14847 阅读 · 0 评论 -
[vue warn][Avoid mutating a prop directly since the value will be overwritten xx]
翻译内容:避免直接改变属性,因为当父组件重新呈现时,该值将被覆盖。相反,使用基于属性值的数据或计算属性。原因:子组件不可以直接修改props中传递过来的数据。解决方案:在data中定义一个变量赋值props中的值,然后操作该变量即可。补充:props属性值获取必须在beforeCreate周期之后才能获取到内容。...原创 2020-05-18 14:54:56 · 2307 阅读 · 0 评论 -
[Vue warn][data functions should return an object]
翻译内容:data方法必须要返回一个对象原因:忘记加return了,因此改为如下:问题:为什么data必须是一个方法返回而不像method一样只是一个属性?直接作用:通过data方法返回的形式可以保证每个组件的数据独立性,即相互之间不会出现干扰。原理:函数的作用域概念官方解释:https://cn.vuejs.org/v2/guide/components.html...原创 2020-05-18 14:43:01 · 24212 阅读 · 2 评论 -
[vue warn][Error in v-on handler: RangeError: Maximum call stack size exceeded]
翻译结果:超过最大调用堆栈大小这个问题的产生是由于自己在某个地方重复调用了内容,如自己调用了自己,或者使用了递归函数但是确没有结束的逻辑。通俗讲就是出现了死循环解决方案必须得检查对应方法的逻辑内容。**常规出现情况1:**某个情况下不小心重复调用了自己或者和自己名字一样的方法。常规出现情况2: 父组件调用了子组件的方法,而子组件又调用了同样的父组件方法,形成了死循环。**常规出现情况3:**递归操作,没有给出结束递归的条件,导致操作一直执行下去,从而报错。...原创 2020-05-18 13:56:20 · 18978 阅读 · 1 评论 -
vue[浅谈PC项目布局需求]
在PC端vue项目开发过程中我们可能会遇到许多不一样的页面开发需求需求1中间主容器宽度固定然后居中放置,当页面小于某一个宽度时候就将部分内容隐藏或者容器宽度变小。小到一定程度就出现侧边滚动条。如:京东、淘宝等购物网站原理:响应式布局(媒体查询)需求2内容布满整个浏览器,当浏览器屏幕大小变化时候,页面元素的间距,填充,字体等都会跟随着变化使得页面能够完全自适应如:后台管理相关的网站原...原创 2020-05-13 16:38:10 · 264 阅读 · 0 评论 -
vue[对指令探究与整理]
指令的概念原创 2020-05-13 12:02:26 · 126 阅读 · 0 评论 -
vue[生命周期][组件生命周期的基本]
重要性作为一个vue的开发者,我们必须了解vue的运行生命周期,只有知道其在创建到销毁的整个过程,我们才能够在开发中找到一些问题的解决方式。比如:请求接口放在created()、定时器在destroyed()中清除、像echarts等图表插件的运行必须放在mounted()里面、间断式更新需要使用updated()、dialog之类的弹出框以及v-if之类的展现过程要怎么配合$nextTick()方法之类的。认识生命周期官方图例:总结:八大生命周期包含了组件在创建到销毁的整个详细过程(每个.vu原创 2020-05-12 13:50:44 · 411 阅读 · 0 评论 -
axios[一文整理axios的常规使用]
认识axiosAxios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。常用于搭配vue当作接口请求的工具安装npm install axios --save安装完毕后即可导入并且发出请求import axios from 'axios';axios.get('/user?ID=12345') .then(function (response...原创 2020-04-21 17:44:52 · 232 阅读 · 0 评论 -
vuex[一文整理vuex的常规使用]
vuex[常规的状态管理使用方式]原创 2020-04-21 15:12:52 · 569 阅读 · 0 评论 -
vue-router[一文整理vue-router的常规使用]
vuerouter[vue路由常规的使用方式]原创 2020-04-20 17:39:38 · 345 阅读 · 0 评论 -
[vue warn][Invalid default value for prop xx: Props with type Object/Array]
问题显示产生问题的出处解决办法原创 2020-04-17 10:44:18 · 7147 阅读 · 0 评论 -
vue[(事件车eventBus)中央事件总线数据传递]
本质中央事件总线(通俗讲就是:eventBus事件车)的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。作用实现非父子组件之间的数据传递使用方式第一步:注册eventBus最简单直接的方式就是在main.js中直接注册并且挂载一个空vue实例如:main.js文件中如下:注意要import Vue from...原创 2020-04-16 11:21:21 · 1326 阅读 · 0 评论 -
vue[css换肤功能的多种实现方式]
vue中换肤功能有着好几种实现方式,如下:利用class 命名空间,同时命名多套主题如:black-theme、light-theme等,按需加载主题类名(简单 - 常用)准备多套CSS样式,利用link标签的ref切换(简单 - 按需加载主题,但是管理配置没1方便)使用CSS预处理器(如:scss)生成多套主题样式(复杂 - webpack打包处理)CSS3的变量功能生成多套主题样式(...原创 2020-01-16 15:20:22 · 6854 阅读 · 0 评论 -
vue[Access to XMLHttpRequest at xxx by CORS]跨域问题前端解决方式
在vuecli3的目录结构中,代理配置是在vue.config.js文件中进行配置原创 2020-01-06 11:44:22 · 11882 阅读 · 2 评论