Vue总结
文章平均质量分 67
对vue的学习分享
韦_恩
【知乎:韦恩少爷】
1.测绘硕士研究生毕业、注册测绘师、软件设计师;
2.擅长C#/.Net、Android、Java、Vue、JavaScript、CAD、ArcGis等主流开发技术栈;
3.不定期分享技术干货(踩坑记录)与日常电脑使用技巧;
【流水不争先,争的是滔滔不绝】
展开
-
Vue3--router路由快速上手
createWebHistory-->创建history模式路由【常用】createWebHashHistory-->创建hash模式路由createMemoryHistory-->创建内存模式路由【使用频率不高,因为地址会固定到内存中,当刷新页面时会找不到】createRouter-->创建路由对象目录1.路由4步入门:2.总结:1.路由4步入门:①引入对象import {createRouter,createWebHistory} fr..原创 2021-05-18 23:38:11 · 383 阅读 · 0 评论 -
Vue3--ref使用(解决ref无法获取dom元素的问题)
众所周知在vue2中,ref主要的作用还是便于快速的获取dom元素或组件,因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。具体关于vue2中ref和$refs的使用,这篇文章写的十分全面:https://www.cnblogs.com/xumqfaith/p/7743387.html本文还是针对Vue3中ref使用进行说明,重点是模板ref的使用。1. ref用法1:基本类型封装,使数据响应式vue3中为了节约资源,并不是全部数据都会进行响.原创 2021-05-18 17:23:37 · 52867 阅读 · 28 评论 -
Vue3.x 报 Uncaught TypeError:Object(...) is not a function( Vue3对象不是函数解决思路)
今天在vue3的练习时候发现我写的路由总是浏览器报错,仔细校验文档发现并没有错误啊,可总是报Uncaught TypeError:Object(...) is not a function的错误,看下图:网上针对这个错误的解释都是重名啊、大小写错误啥的。很显然对于我这种老鸟(菜鸡)是不可能犯这种错误的。经过一顿折腾竟然是版本问题。。。。。。。。。。。我查看了路由的版本号,3.5.1并不是最新的,理论上讲应该问题不大,但是还是抱着试一试的心态把vue相关的都升级了一遍,再次编译,竟然没有这个问题了。真原创 2021-05-17 23:48:18 · 19337 阅读 · 2 评论 -
Vue3父子组件emit参数传递(解决Vue2this.$emit无效问题)
之前写了一篇Vue3路由跳转问题的博客,发现还是有很多同学对基本的使用改变还没有了解,于是我就顺道把常用的组件间传递的方式也写一下吧.......注意的是:1.Vue3中不在强调this的使用,可以说你在setup中完全不能用this,不像Vue2中把全部的内容都集成到this中。2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在(当然Vuex现在可以用没什么变化)。3.如果您有Vue2的开发经历,用Vue3也不会特别陌生,会很快上手。目录1.解决.原创 2021-01-30 10:09:43 · 24982 阅读 · 8 评论 -
Vue3路由push跳转(解决Vue2this.$router.push失效)
Vue3.x出来有一阵子了,今天用它的时候发现Vue2中的this.$router.push竟然不能用了!!!!!,真是服了,还得花点时间瞅瞅咋回事,所以.....还是总结下吧目录 1.Vue3.x路由跳转2.获取参数3. router-link4.总结1.Vue3.x路由跳转不要this了,直接引用路由对象,看下图:importrouterfrom'@/router/index.js'用这个路由对象router去push(剩下的和Vue2.x一样)...原创 2021-01-27 17:20:10 · 23190 阅读 · 22 评论 -
vscode中自定义Vue3.x与Vue2.x用户片段模板
目录1.创建代码片段步骤2.Vue3代码片段模板3.Vue2代码片段模板4.语法说明1.创建代码片段步骤文件--->首选项--->用户片段,如下如所示之后就可以进入自定义代码片段界面,输入该片段名字(这个名字仅仅是区分不同代码片段的,并不是快捷键prefix前缀)下面给出vue2和vue3代码片段,直接复制粘贴就可以。2.Vue3代码片段模板{ "Print to console": { "prefix": "vuecli3", "body":原创 2021-01-23 15:48:52 · 2395 阅读 · 0 评论 -
基于Vue的淘宝首页跳转商品搜索页的最佳实现方式总结(包括v-model组件间使用技巧总结)
今天在练习淘宝项目的时候,做到一个最为常见的功能,就是从主页搜索框搜索内容,点击搜索后能跳转到详细商品页面,同时用户也能在该页面重新搜索,不必返回主页面再搜,大致意思看下图。其实这个功能很多都有,比如百度,我们搜索后进入词条内部,其上面依然有搜索框可以重新搜索。以前没注意这个,今天注意了特来总结下以免忘记。其实这里面包含两点需要注意的(①v-model组件间使用技巧,②子组件不能直接在内部改变父组件传递过来的参数)。目录1.功能需求2. 目录结构3.详细说明3.1路由表3.2主页.原创 2021-01-18 11:41:46 · 2378 阅读 · 3 评论 -
NavigationDuplicated:Avoided redundant navigation to current location(重复请求相同路径警告)解决办法
个人理解:在Vue中为了节约资源,一样的内容不会重复加载(浏览器如果发现请求地址一样也不会跳)。所以当你请求跳转相同的路径时,虽然不影响程序运行但是控制台中还是会跳出警告。我在此前做ASP.NET的时候一般出现这种情况解决办法是加随机数,在每次请求的地址中加一下不重复但又无关紧要的随机数就可以了。但是vue中$router.push让我不知道怎么加随机数了(希望有知道的同学评论区留言),所以考虑他法。1.prototype方法:在router.js文件中加上如下图所示代码段即可。//解决v..原创 2021-01-17 23:18:38 · 20686 阅读 · 6 评论 -
Vue中的computed计算属性在生命周期中的执行阶段
今天在做Vue练习时候,用到了computed计算属性get()和set()操作,由于是从子组件将值扔给父组件中计算属性的,我就想到created不是页面加载最初执行的钩子么?就有了computed和created谁先谁后的问题。然后查阅网上答案,思否的一篇解释的比较靠谱,特来总结下,方便再看。结论:computed的初始化是在beforeCreated和created之间完成的分析:1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init原创 2021-01-17 22:16:35 · 5934 阅读 · 0 评论 -
通过浏览器Request Method:OPTIONS探索CORS跨域问题
事情是这样的,今天在做登录练习的时候F12查看Network,发现有两个login(如下图所示),可我明明就请求了一次啊?经过我网上研究学习才知道这是cors跨域浏览器触发options预检请求才导致的。接下来就对整体进行总结说明。目录1.现象分析2.CORS跨域2.1简单跨域请求2.2复杂跨域请求3.总结1.现象分析我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求,请看下图:.原创 2021-01-15 11:49:39 · 1745 阅读 · 1 评论 -
基于Vue实现登录模块流程总结
有没有同学在最开始学前端登录模块时对于应该干什么感到困惑?登录模块让做也能做出来,但是整体过程弄不清。vue,axios,vuex在这里如何配合也弄不清楚?本文就对基本的流程进行说明,相信你看完就会对登录部分有十分清晰的认识,之后再看复杂登录部分也完全不在话下。原创 2021-01-15 10:07:03 · 2750 阅读 · 0 评论 -
Vue动态加载ECharts图表数据小结
刚接触echarts只是知道他能辅助前端做数据展示,但是他的demo数据都是写死的,而正常数据都是通过axios请求服务器动态填充获取的啊,为此还一顿研究.....(真是傻了)。因为它本身是很简单的,echarts就是通过option进行无脑堆叠的,option本身就是json,你可以随意设置,设置好了之后重新刷新就行了啊。。。。。。。。。。下面简单说一下我的程序吧。动态数据基本分三步:①在data中定义空的option:{}②在created中为option图表设置赋值(数据项可为null).原创 2020-12-30 16:55:30 · 4890 阅读 · 4 评论 -
基于Vue的动态通用table表格及dialog对话框处理技巧总结
前言:采用vue并结合element-ui制作网页端管理系统中的表格是不难的,对应的form,table,dialog基本都有现成的样例,再结合vue基于数据的方式,很轻松就可以实现一个表格展示并进行动态添加,那么问题来了,如果一个管理系统中有很多表格,难道我们要一个一个去制作?就没有一个一劳永逸的解决办法么?只要制作一个table模板,给我要展示的数据,告诉要展示那些列,就能自动生成表格?答案是有的,下面我就如何用vue处理这种情况的方式技巧进行说明。源代码已经上传到gitee中,连接地址在文末给出。原创 2020-12-20 11:31:55 · 6409 阅读 · 1 评论 -
uni-app存储全局变量有哪些方法(uni.switchTab跳转无法传参解决办法)
前言:uniapp中页面跳转可以说主要有两种方式,第一种是uni.navigateTo,第二种是uni.switchTab,这两个的区别在于:navigateTo是保留当前页面,跳转到应用内的某个页面,并且跳转的页面不能在pages.json页面中注册,他是可以以querystring的方式带参数的(例如:'path?key=value&key2=value2')。switchTab是跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,跳转的页面需在pages.json页面原创 2020-12-14 20:16:28 · 1946 阅读 · 0 评论 -
uni-app(微信小程序)连接HC系列蓝牙模块并进行双向通信采坑总结
吐槽:先说一下心路历程,因为个人开发的一个APP,需要连接蓝牙模块进行设备控制和双向的数据通信,所以尝试用uni-app开发一个手机程序对购买的蓝牙模块进行连接,emm.......怎么说呢,理论上过程都是通的,但坑还是太多了。今天过程跑通了,特来总结一下。说明下,代码太长了,所以我准备分段说明展示,完整代码到时候我上传到github上,地址最后我写在评论里哈。进入正题...........1.蓝牙通信整体流程上图一共九个步骤就是创建uni-app/微信小程序连接蓝牙设备并进行通信的基本步.原创 2020-12-13 17:21:08 · 10847 阅读 · 55 评论 -
uni-app(微信小程序)编写小程序加载map地图总结
因为自己想在手机端开发一个应用要应用Vue框架,所以就想到了uni-app,其中一个模块就要加载地图并获取位置信息。这个uni官网给了api,调用也还方面,现就开发中的思路和几个关键方法进行说明,由于uni-app最开始就是以微信小程序为主的,所以他和微信开发者工具基本很类似,他们两个可以互相参考着学习。这里我还是以uni-app为主。这里要特别注意的一点就是:绘制地图和获取位置信息是两件事。先获取位置信息,再将位置信息展现在地图上。1.绘制地图在手机端直接将<map></原创 2020-12-09 15:41:25 · 8943 阅读 · 4 评论 -
rg.exe占用cpu导致卡顿解决办法
使用vscode时候发现操作卡顿,打开进程一看是rg.exe占用过高导致得。下面通过图片介绍如何关闭rg.exe进程。1.点击【文件】2.选择【首选项】中得【设置】3.搜索search.followSymlinks亲测有效!...原创 2020-11-11 21:05:34 · 4624 阅读 · 0 评论 -
Vue-cli项目开发阶段如何关闭eslint检查
在刚学vue-cli过程中,对于eslint的检查真是十分恼火,实在是过于严格,例如定义一个变量如果没有引用,也会报错。这样会让你无暇顾及程序本身,你会花很久时间去处理eslint的问题(其实你的程序本身并无问题)。这里笔者也尝试过网上的方法,但都是治标不治本,最后还是在vue.config.js配置文件中修改并重新编译后,才真正关闭了“烦人的”eslint。下面对网上几种常见方法进行总结。目录方法一:删除或禁用有关eslint的插件(vscode里)方法二:添加"eslint.enable":原创 2020-07-17 10:59:41 · 7184 阅读 · 1 评论