VUE
小鸟哗啦啦
日落月深,风华雪月动人,久别遇故人,沉沦
展开
-
ElementUI的不常见报错Error in beforeDestroy hook: “Error: [ElementForm]unpected width
beforeDestroy 钩子中的错误:‘Error: [ElementForm]unpected width‘原创 2022-11-15 14:29:18 · 7401 阅读 · 5 评论 -
项目中自用的 .eslintrc.js 配置
自用eslint配置原创 2022-06-30 08:59:04 · 2108 阅读 · 0 评论 -
关于vue.config.js的部分配置
在vue2.0中,配置都写在vue.config.js文件中;记录下常用配置;原创 2022-03-07 14:38:18 · 2741 阅读 · 0 评论 -
TypeError: Object(...) is not a function at eval问题
问题描述:项目运行时控制台报错,这里拿别人的图说明一下可以看到,assginPermission.vue这个文件中报错;这里需要确定的有一下的几个点:1.引入名称,比如说getEvaluationBuyMember 这个函数在api/piaget/common.js中的名称2.存在与否,在api/piaget/common.js中是否存在getEvaluationBuyMember3.引入方式,common.js 中是 使用 export 导出的函数,所以需要 ...原创 2021-11-24 10:39:07 · 5342 阅读 · 0 评论 -
解决el-dialog弹出时,页面抖动,右侧会缩小的问题
问题描述:我们在使用el-dialog时,会发现弹出框弹出时,页面会抖动,直接效果就是页面右侧会发生变化,缩小了几个像素点;体验感不是很好,另一个就是会影响到页面的布局;解决方法:1.全局设置body的padding-right: 0 !important;不太可取,虽然可以解决这个问题,但是影响了页面的布局效果;2.在main.js中,找到引入element的地方,举个例子import Element from "element-ui";import "element-ui/l...原创 2021-11-19 10:53:48 · 3058 阅读 · 3 评论 -
el-cascader报错TypeError: Cannot read properties of null (reading ‘level‘)
具体是把el-cascader封装到自己的组件里,然后在使用这个自己封装的组件时发现以下错误,不影响使用,只是控制台报错。我是在一个vue文件中反复使用了这个组件。估计问题是出现在 el-cascader 的反复渲染上,没关系,为每个级联选择器加个key1.每次组件渲染时 手动传入个index,发现不行2.直接在组件里给个key,在data里面设置初始值为0当config数据发生变化时,监听改变这个key值,齐活,收工!...原创 2021-10-28 10:33:47 · 19973 阅读 · 3 评论 -
vuex 的使用
vuex的执行过程,组件派发任务(dispatch)到 actions,然后由actions来触发mutations中的方法,进而更新state中的数据。原创 2021-06-21 15:16:20 · 211 阅读 · 0 评论 -
vue 的 mount 与 骨架屏 的实现
/***1.vue的渲染**在vue中,我们通过$mount实例来挂载vm;首先缓存原型上的$mount方法,*然后限制el,vue不能挂载到bodyhtml这样的跟节点上,why**render生成的vNode,通过$mount方法,挂载==替换到定义的dom元素上,总不能把bodyhtml这样的节点替换掉*index.html中的<divid="app"></div>也就是替换了id...原创 2021-06-21 10:34:54 · 214 阅读 · 0 评论 -
Vue常用API记录
这篇文章是在掘金上面看到的,觉得很有用,然后加上自己的理解作为记录。原文链接:https://juejin.cn/post/6924181583373500430nextTick功能: 添加在下次Dom更新循环结束之后的延迟回调,修改数据之后,可以获取更新后的Dom。用法:Vue.nextTick( [callback, context] )vm.$nextTick( [callback] )// 用法2// 作为一个 Promise 使用 (2.1.0 起新增)Vue.nextTic原创 2021-02-01 17:20:20 · 194 阅读 · 1 评论 -
vue中的 样式穿透
用于修改第三方ui组件库的样式,vue与element-ui比如说,在vue的某个组件中想要修改element-ui的按钮样式,但是在其他的非子组件中按钮样式又想保持element-ui的风格。就需要使用 scope 和样式穿透>>> .el-button_danger font-size 20px/deep/ el-button_primary font-size 16px...原创 2021-01-26 17:31:20 · 201 阅读 · 0 评论 -
vue中的 this.$router.push() 路由跳转事件
this.$router.push可以携带参数跳转内链页面,需要在index.js中配置路由。两种传参方式:params 携带的参数不会出现在网页上方的地址栏中传递数据this.$router.push({ path: '期望跳转且index.js中已经配置的路由名称', params:{ token: '*****', dateTime: '2021/01/26 10:10:10' }})取数据this.$rout原创 2021-01-26 17:26:20 · 1857 阅读 · 0 评论 -
vue中的$attrs 与 $listeners 多级组件间的信息传递
1.应用场合多层级组件之间传参可以使用$attrs, 如果使用普通的父子组件传参prop和$emit,每一级组件都需要进行接收,然后向下传递,就很麻烦。在使用$attrs时,如果组件中不使用props进行接收,这些参数将会作为此组件的HTML元素特性。如果这个组件中使用了props进行了接收,那么被接收的参数将不会向下传递。inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute,同时父组件传过来的属性(没有被子组件的props接收的属性),也不会显示在子原创 2021-01-25 19:37:36 · 657 阅读 · 1 评论 -
技术博客框架vuepress的使用总结
什么是vuepress?这个一定要弄明白,我就是直接看的官方文档,着急写项目了,结果遇到了很多坑,非常不建议这么做,费时费力。官方说法:vuepress是为了支持vue及其子项目的文档需求,每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。而且官方文档好像也是用vuepress写的。vuepr原创 2021-01-11 20:53:17 · 3664 阅读 · 0 评论 -
vue中监听iframe的高度来实现自适应
在上一篇文章中说明了如何iframe的父子级之间如何传递信息,但是获取iframe子页面滚动高度的效果并不是很理想。可能出现的问题:1.特殊场景下会出现双重滚动条,影响体验2.即时是加了setTimeout()定时器函数,有的时候也不能够取得准确的scrollHeight的值,例如iframe子页面有很多图片,图片加载过程就会影响到页面的高度。优化:考虑到上述问题,开始寻求其他方式来监听iframe子页面的滚动高度值。经大神提点,建议在iframe子页面中监听整个页面容器的高度,类似原创 2021-01-07 21:13:50 · 3269 阅读 · 3 评论 -
Vue 中使用 iframe 踩坑记录 iframe + postMessage
好久没写博客了,前一段时间都在准备面试相关的,最近换工作了,加上住进了自己买的小房子,各种事情,还是比较忙的。我们来言归正传:需求:最近在写一个博客的功能模块,技术栈是单独选择的vuepress,完成后想要融合到一个vue工程里,考虑到后期维护的问题,就通过iframe将vuepress打包后的工程页面引入到vue工程的一个页面中,这样iframe的父子级页面之间也要进行信息的传递,比如说传递iframe的子页面的滚动高度给父页面,然后撑开页面高度。1.iframe的初始高度问题vue工程的原创 2021-01-06 17:44:35 · 1783 阅读 · 0 评论 -
Object.defineProperty 与 Proxy
众所周知,Vue2.0 的双向数据绑定原理是基于 数据劫持 和 发布订阅,数据劫持部分用的就是Object.defineProperty();但是Vue 3.0 已经做出优化,改为 Proxy() 代理的方式。1.优缺点比较Object.defineProperty():将一个js对象传递给vue实例对象的data()时,vue通过Object.defineProperty来遍历目标对象内部的属性。 优点: 更为准确 缺点:无法对数据下标进行监控,需要遍历对象,效率低 Proxy代理:将原创 2020-11-12 10:20:16 · 299 阅读 · 0 评论 -
Proxy代理
Proxy对象用于定义基本操作的自定义行为,我理解为拦截自处理,官方称为代理。MDN文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy语法:varp=newProxy(target,handler);//target所要拦截的对象//handler规定拦截后如何处理handler的拦截器有13个1.基础示例var target ...原创 2020-11-12 09:37:02 · 292 阅读 · 0 评论 -
VUE3.0的基础构建及数据绑定和echarts插件引入
最近vue推出了3.0,展现出 vue3.0+TS 的不可抵挡之势。所以找了一下vue3.0的免费课程,记录一下笔记。1.工程创建这个没什么好说的,vue create projectname 然后根据自己需求勾选,当然vue版本选择3.0,ts也选上吧,也可以后续自行安装。2.开始使用进入工程发现,结构目录啥的跟原来还是一样,打开router/index.ts,也是没什么变化嘛!但是,vue从2.0到3.0,可以说是发生了很大的变化,无论从思想还是写法。比如说:没有data()了,原创 2020-11-10 09:00:03 · 900 阅读 · 1 评论 -
patch函数 diff算法 原理
//vnode=>dom虚拟dom=>真实的dom(vue初始渲染)//patch与diff算法http://www.lanlanwork.com/blog/?post=6056//初始渲染根据虚拟dom创建出元素,将该元素的子元素和属性逐个添加到这个元素上面,形成真实domfunctioncreateElement(vnode){//目标对象uldivlettag=vnode.tag;//目标对象的属性...原创 2020-11-06 14:45:34 · 389 阅读 · 0 评论 -
vue的响应式实现原理
vue2.0的双向数据绑定主要实现方式就是: 发布订阅 + 数据劫持这里来手写一个实现过程,// 发布订阅 + 数据劫持// 订阅器模型let Dep = { // 容器 clientList: {}, // 为何不是数组? 深拷贝与浅拷贝,使用数组需要key来进行查值 // 添加订阅者 listen: function (key, fn) { // 短路运算 (this.clientList[key] || (this.cl原创 2020-11-05 13:44:55 · 800 阅读 · 1 评论 -
vue初始化页面闪动问题
这是因为在vue初始化之前,由于div不归vue管,所以我们写的代码在还没有解析的情况下,容易出现花屏的现象,类似于{{message}}的字样,虽然这个时间很短暂,但是需要解决。首先:css中添加[v-cloak] { display: none;}如果没有彻底解决,需要在根元素上加:这里默认vue实例绑定到类名为app的div上。<div class="app" style="display: none;" :style="{display: 'block'}"&..原创 2020-10-19 15:28:21 · 3596 阅读 · 0 评论 -
vue的路由实现模式 hash 与 history
使用vue-cli在创建工程时,如果勾选了vue-router,后面会提示是否使用history模式。如果输入 n ,将使用hash模式。那么这两种模式有什么区别呢?1.hash模式:浏览器上方地址栏中的符号“#”以及“#”之后的字符被称为hash,window.location.hash 可以读取hash模式特点:hash在URL中,不被包含在HTTP的请求体中。如 https://www.xxx.com用于指导浏览器动作,对服务器安全无用。hash不会重加载页面。对于后端来说,即时没原创 2020-10-15 15:33:44 · 309 阅读 · 0 评论 -
vue-cli 4.5.7 安装报错,导致vue脚手架失效
最近 vue-cli 版本更新到了4.5.7 重新执行npm install -g @vue/cli终端会报错,一系列的error,同时 vue 也会出问题,比如 vue -V 提示无法识别 vue 命令。并不存在环境变量的问题,之前一直使用都没有问题,vue更新之后才报错的。如何解决呢?终端输入:npm info vue查看vue的信息。npm config get registryhttps://registry.npmjs.org/我查了这些都没有问题,.原创 2020-10-15 09:01:35 · 530 阅读 · 1 评论 -
vue项目调试时控制台报错 sockjs-node/info?t=1600762121688 net::ERR_NETWORK_CHANGED
找了一下原因:sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。在项目运行以后,network会一直调用这个接口。如果没有使用,那么就一直会报这个异常。那我们来点进去看一下这个js如何解决这个问题, 找到 node_modules/sockjs-client/dist/sockjs.js这个文件, 把上图中标记的1606行注释。...原创 2020-09-22 16:18:02 · 1887 阅读 · 1 评论 -
解决vue-router进行路由导航时,浏览器地址栏中的 #
修改index.js中所实例化的router,举个栗子import Vue from 'vue'import VueRouter from 'vue-router'constroutes=[{path:'/',redirect:'/login'},{path:'/login',name:'Login',component:Login}]const router = new VueRouter({/* vue...原创 2020-09-21 15:31:01 · 652 阅读 · 0 评论 -
VUE-CLI项目上线
VUE-CLI项目上线2.1 项目上线的相关配置 ##2.1.1 通过node创建web服务器创建node项目,并安装express,通过express快速创建web服务器,将vue打包的dist文件夹托管为静态资源,关键代码: const express = require('express') //创建web服务器 const app = express()//托管静态资源 中间件app.use(express.static('./dist'))//启动web服务器app.li原创 2020-08-10 16:49:52 · 145 阅读 · 0 评论 -
VUE-CLI项目优化策略
VUE-CLI项目优化策略1.1.1 生成打包报告打包时,为了直观的发现项目中存在的问题,可以在打包时生成报告,两种方式:1.通过命令行参数的形式生成报告//--report 选型可以生成 report.html 以帮助分析内容vue-cli-service bulid --report2.可视化UI面板直接查看报告 -- 推荐在可视化的UI面板中,通过 控制台 和 分析 这两个面板,查看项目中的问题查看结果 for example可以看到需要优化的部..原创 2020-08-10 16:49:14 · 311 阅读 · 0 评论 -
vue-cli 项目优化时报错 Uncaught TypeError: Cannot redefine property: $router
一定要看到最后,第一部分只是单独针对这个问题的,第二部分是具体项目中的做法1. 单独处理 这个问题在优化vue-cli项目时,为了减少文件体积,采用cdn的方式加载了第三方的依赖。vue.config.js中,在发布模式下配置,//为开发模式 发布模式 分别指定不同的打包入口文件 chainWebpack: config => { // 发布模式 才有必要去配置externals config.when(process.env.NODE_E.原创 2020-08-10 10:46:44 · 2851 阅读 · 0 评论 -
Vue.conifg.js完整配置项
1.关于devSever的配置: devServer: { open: true,//设置自动打开 port: 1880,//设置端口 proxy: { //设置代理 '/axios': { target: 'http://101.15.22.98', changeOrigin: true, secure: false, //如果是http接口,需要配置该参数 pathRewrite: {原创 2020-08-10 09:34:43 · 428 阅读 · 0 评论 -
搭建vue-cli工程时遇到Unknown custom element router-view did you register the component correctly
搭建vue-cli脚手架的过程中遇到的这个问题,网上找了很多,都没有解决我的问题首先,问题出在router的index.js文件中,index.js文件就是以前的router.js,千万记住,不要跟着老版本的教程来。1.切记不要手动创建router.js,即使是你自行创建了、也添加配置了,工程也不会去寻找这个文件的。2.不要把main.js中的import Vue from 'vue'改成import Vue from'vue/dist/vue.min.js',这样虽然不会报错,但是不安全。原创 2020-07-23 13:42:06 · 1021 阅读 · 0 评论 -
vue.config.js配置文件
vue.config.js这个文件在创建完vue脚手架工程之后,需要自己手动创建,存放的是一些配置项,遵循json 书写规则。这里,粘贴一个自己写好的配置项。注意:配置项中内容不能为空,我的文件中pluginOptions第三方插件配置 已经 注释。 一定要注意,否则会报错"ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties"const goo..原创 2020-07-21 15:12:42 · 782 阅读 · 0 评论 -
Vue 中的 Axios 使用
Axios 中文文档地址axios 的显著优势在于 代码量较 fetch 少了很多HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue fetch</title> <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/v原创 2020-07-16 16:38:28 · 199 阅读 · 0 评论 -
Vue 中的 Fetch 使用
废话不多说 ,直接上代码HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue component</title> <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script&g原创 2020-07-16 16:01:16 · 1125 阅读 · 0 评论 -
Vue.js 路由
Vue.js 路由通过不同的URL来访问不同的内容中文文档: https://router.vuejs.org/zh/通过Vue.js可以实现多视图的单页Web应用,single page web application SPA1.引入 vue-route.js文件地址: https://unpkg.com/vue-router/dist/vue-router.js2.简单实例借用菜鸟教程:<!DOCTYPE html><html>&原创 2020-07-15 16:23:33 · 144 阅读 · 0 评论 -
Vue特性的简单总结
关于Vue的基础特性及其使用方法,一些教程网站均有详细介绍。本文旨在总结记录,稍加个人理解原创 2020-02-28 14:45:07 · 401 阅读 · 0 评论