![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
songywaa
每天进步一点点
展开
-
element-ui el-tree 筛选显示子节点
模糊搜索,搜索父节点展开其所有子节点原创 2023-02-02 17:39:43 · 2644 阅读 · 1 评论 -
vue的title标签中的htmlWebpackPlugin.options.title
htmlWebpackPlugin.options.title原创 2022-09-17 13:50:00 · 1265 阅读 · 0 评论 -
vue使用qrcodejs2生成二维码
前端实现生成二维码功能1、安装 qrcodejs2npm install qrcodejs2 --save 2、引入qrcodejs2//在main.js或者页面中引入import QRCode from "qrcodejs2";3、具体代码methods: { qrcodeRender(id) { this.$refs.qrcode.innerHTML = ""; //获取当前的ip和端口,不要写死 const ipP原创 2021-07-12 10:35:48 · 1347 阅读 · 0 评论 -
【node】process.env.NODE_ENV在Vue中的应用
process.env.NODE_ENV是什么process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。命令行中执行 node -> process.envprocess.env 包含着关于系统环境的信息,但是并不存在 NODE_ENV 这个东西,需要自己手动配置,这个变量主要用于标识当前的环境(生产环境,开发环境)。不同系统有不同的环境变量配置方式NODE_ENV 与 Vue(官方文档)官方地址:h原创 2021-03-13 13:33:09 · 1314 阅读 · 0 评论 -
解决 vue热加载编译速度慢问题,引入按需加载插件 dynamic-import-node
遇到问题当编译项目时,需要花费很长时间,会在67%左右卡顿解决办法1、安装 babel-plugin-dynamic-import-nodenpm install babel-plugin-dynamic-import-node2、vue-cli3:修改babel.config.js文件 (vue-cli3)vue-cli2:.babelrc文件里添加配置dynamic-import-nodemodule.exports = { presets: [ '@vue原创 2021-03-12 10:47:32 · 5772 阅读 · 1 评论 -
vue 父子组件的生命周期顺序
vue 父子组件的生命周期顺序1、加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted我们看到是先执行父组件的beforeCreate, created, beforeMounted这三个,虚拟Dom生成还没有挂载到页面上;beforeMounted之后执行子组件的四个生命周期,子组件先挂载完成,接着父组原创 2021-02-23 11:10:37 · 531 阅读 · 0 评论 -
解决vue封装的echarts组件多次调用出现id重复问题
问题描述封装的echarts组件多次被调用,id重复,导致页面不渲染,数据覆盖等一系列问题,id从父页面传入也达不到我要的效果解决方法干掉id,使用ref//修改前<div class="component"> <div class="WH" id="chart"></div></div>//修改后<div class="component"> <div class="WH" ref="chart">原创 2021-02-22 17:48:57 · 3468 阅读 · 9 评论 -
正则手机号验证最全包含177、166、199等验证
/*** 手机号码* 移动:134 135 136 137 138 139 147 150 151 152 157 158 159 178 182 183 184 187 188 198* 联通:130 131 132 145 155 156 166 171 175 176 185 186* 电信:133 149 153 173 177 180 181 189 199* 虚拟运营商: 170*/var checkPhone = (rule,value,cb) =>{ .原创 2020-12-18 13:55:06 · 1111 阅读 · 0 评论 -
【VUE】使用this.$forceUpdate();解决页面v-for中修改item属性值后页面不渲染问题
问题描述:点击按钮就修改当前的状态,不想重新加载数据,体验不好;使用this.$set 来修改属性值,打印发现 列表数据已经改变了,但是并没有渲染到页面上;解决办法:this.$set(this.dataList[index],"radioState",code); this.$forceUpdate();//修改属性值页面不刷新问题;使用$forceUpdate强制刷新原因因为数据层次太多,render函数没有自动更新,需手动强制刷新。...原创 2020-11-22 11:24:19 · 1339 阅读 · 0 评论 -
使用Form Generator解决前端vue+elementUI动态表单功能
使用场景:在添加数据时候,页面上有固定的一部分表单,而另一部分表单相当于扩展属性,想做成动态生成,产品经理可以自己通过配置,页面就有了扩展属性的表单;关于Form Generator描述网站网址:添加链接描述GitHub:添加链接描述网站描述:基于vue 的element UI 表单设计及代码生成器,可视化设计表单,一键生成原生的vue单页表单代码;vscode插件:form-generator-plugin具体实现1、2、前台页面如何使用为了方便我们自己测试,就先在前原创 2020-09-03 10:07:45 · 25635 阅读 · 17 评论 -
解决vue v-if 不重新渲染组件问题
问题描述:tab切换,发现v-if 的组件并没有销毁掉组件原因:Vue组件v-if新渲染的组件不更新:可能原因是Vue识别到是相似组件(高度相似甚至相同)不会更新元素。解决办法:给原来的组件和新组件分别给不同的key值让Vue识别为不同的组件。...原创 2020-08-19 10:52:29 · 9567 阅读 · 6 评论 -
解决VUE项目重复点击菜单报错:Avoided redundant navigation to current location: “/xxxxx“. 问题
描述报错见下图:解决方法:在router文件夹下添加下面一段代码// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}...原创 2020-07-11 16:49:53 · 1471 阅读 · 2 评论 -
解决 vue中props对象中设置多个默认值问题
1、遇到问题:props中设置了默认值,但是获取时(获取父页面没有传的属性) 打印出来是undefined子组件props: { paramsObj: { type:Object, default:() => { return { tabList: [], tableFixedHeader: [], showHandleCol:false,原创 2020-07-09 10:58:13 · 19651 阅读 · 3 评论 -
解决elementui动态切换table列内容,出现数据闪动情况
功能描述:动态显示表格的某些列的内容二级表头也是动态显示解决问题:先看下我录制的gif图,会有数据闪动的情况解决方法:首先,不要使用v-show,要使用v-if。其次,表格加载属于懒加载,所以每次切换内容需要让表格重新加载一次实现方法:给表格加索引,每次切换改变索引值直接上代码:// 控制表格切换<el-radio-group size="mini" v-mode...原创 2019-12-21 11:21:38 · 8860 阅读 · 15 评论 -
Vue-Devtools调试工具安装
找了很多资料,大部分都是1、要安装Vue-Devtools,在一个github下面用git clone或者手动下载一个叫做vue-devtools-master的文件。2、然后用npm进行install,3、然后再npm install build。但是这中间可能会报很多错误,需要去一一解决;然后找到了一种简单的安装方法,其实就是大神们自己用npm处理过的Devtools;Vue-De...原创 2019-11-19 10:24:15 · 183 阅读 · 0 评论 -
$router和$route的区别
routerrouter :是 VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,是一个全局对象,他包含了所有的路由包含了许多关键的对象和属性;举例:history对象:\color{red}{history对象:}history对象::$router.push({path:'home'});//本质是向hi...原创 2019-11-17 23:35:55 · 5729 阅读 · 0 评论 -
Vue Router 的params和query传参刷新后参数丢失情况
开发中遇到刷新页面参数丢失的情况params是路由的一部分,创建路由时,须要在路由后边添加参数名。query是拼接在URL后边的参数,创建路由时,不用必须添加,可以直接跳转的时候携带即可params 参数丢失情况:params 传参需要在路由后边添加参数名,例如:/:id/:name,如果在路由中没配置参数,当页面刷新之后,所传参数就会消失如果在路由中配置了参数,例如: /:id/...原创 2019-11-17 23:14:29 · 5424 阅读 · 1 评论 -
vue-router路由动态传参query和params的区别
1.query方式传参和接收参数//路由{ path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个details是传进来的组件名称 }//使用: //方法1:<router-link :to="{ name: 'details', query: { id: 123 }}"&g...原创 2019-11-17 22:58:14 · 214 阅读 · 0 评论 -
router.push(),router.repalce(),router.go()使用
router对象提供了三个用于跳转链接的方法:router.push( ... ) =>跳转到某个子页面,并在history中添加一条记录router.repalce( ... ) =>替换当前的页面,其实也可以理解为跳转,和push的区别就是不会在history中添加记录router.go(number) =>刚才提到的history,在go()中被使用,跳转到上一页就...原创 2019-11-17 21:07:31 · 764 阅读 · 0 评论 -
【vue】子组件调用父组件的方法
简单描述总结子组件调用父组件的3种方法:1、直接在子组件中通过this.$parent.event来调用父组件的方法;2、在子组件里用$emit向父组件触发一个事件,父组件监听这个事件;3、父组件把方法传入子组件中,在子组件里直接调用这个方法;具体实现方法第一种子组件中通过this.$parent.event来调用父组件的方法父组件<template> <...原创 2019-08-12 13:06:38 · 246 阅读 · 0 评论 -
【vue】父组件给子组件传值
简单描述:1、蓝框–组件(SplitLine),代码中有用到,这里说一下,不细说代码;2、红框–组件(bookList),子组件中做循环,父组件给子组件传值;结合下图看下,更明白些;代码1、父组件引入子组件,并使用<BookList :bookList = "bookList"></BookList>模拟数据data () { return...原创 2019-08-09 13:18:25 · 199 阅读 · 0 评论