![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue开发
文章平均质量分 58
使用Vue开发的一些功能记录,避免重复造轮子。
SilenceJude
多做,多想,少说话。
展开
-
Vue中keep-alive时,activated钩子函数比beforeRouteEnter钩子先执行。
Vue中开启keep-alive时,activated钩子函数比beforeRouteEnter钩子先执行。原创 2022-11-28 12:27:48 · 571 阅读 · 0 评论 -
腾讯坐标系转化成百度坐标系
目录需求描述:1、通过数学公式计算后转换。1.1、腾讯/高德地图经纬度转换成百度经纬度1.2、百度经纬度转换成腾讯/高德地图经纬度2、利用官方提供的api文档进行转换。2.1、腾讯坐标系转换成百度坐标系。2.2、百度等其他坐标系,转腾讯坐标系。验证结果:需求描述:不同坐标系之间的转化是比较常见的需求,今天恰好我也遇到了一个相关场景。要求是讲小程序传来的腾讯坐标系转换成百度坐标系,再传给后台。经过查阅相关资料后,发现主要有以下2种方式:1、通过数原创 2021-11-11 18:34:13 · 7315 阅读 · 0 评论 -
Vue封装一个tab组件
1、封装好的组件使用方式。<!-- --><template> <div class=''> <GetBagTabs class="tabs" v-model="activeIndex"> <GetBagTab title="扫码取袋" name="1"> 扫码取袋展示内容 </GetBagTab> <GetBagTab title="支付取袋" name=原创 2021-11-09 18:18:05 · 1284 阅读 · 0 评论 -
v-for循环中的点击事件无效,不报错也不崩溃处理心得。
晚上加点东西到列表循环里,结果发现怎么改点击事件都不生效。查看控制台,也没有报错,只是单纯的点击不生效。于是写了个测试按钮,一步步的挪,发现都是可以的。一直挪到v-for中就会失效。 <div class="hot_list"> <div class="hot_info_item" v-for="(item,i) of currentImageItem.hotAreaConfigInfoList" :key="item.id">原创 2021-06-14 23:19:59 · 3160 阅读 · 0 评论 -
Vue属性书写顺序推荐:
为了降低代码阅读成本,同时规范化代码,这里推荐一套vue属性书写顺序:使用方法如下,vscode编辑器,点击【文件】——【首选项】——【用户片段】——【新代码片段】,然后输入一个命名,比如:test,然后回车,然后复制以下代码段即可。代码片段如下:{ // Place your gold-mall-admin-dev 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, bo原创 2020-12-07 10:59:52 · 1683 阅读 · 0 评论 -
封装自定义组件使用v-model的方法:
以前对封装自定义组件使用v-model时理解不深,甚至有些错误理解。导致每次写v-model时非常麻烦,不愿意使用。今天再次用到时,查了相关资料,终于理解了如何最直接的使用v-model以及model。举个例子:需要封装一个tab组件,并且使用v-model来获取当前tab栏的值。那么父组件调用的代码则期望是这样的:而v-model是绑定参数和绑定事件的语法糖,一个组件上的 v-model 默认会利用名为 value 的 prop 和名为input 的事件,因此v-model一般情况下是::va原创 2020-11-12 17:48:51 · 3095 阅读 · 1 评论 -
获取dom元素的真实style属性。
今天需要写一个滑动的特效,在开发的过程中发现,通过js获取dom的style样式时,style中的属性全是空字符串,而css中明明已经定义了bottom,z-index等等属性。查阅了相关资料后了解到,js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中。而dom.style这种方式获取到的样式只能是内联样式。要想获取到实际的css样式,我们需要使用以下方法,来获取实际的style样式:function getStyle (obj, attr) { if (obj.curre原创 2020-10-24 11:01:39 · 2794 阅读 · 1 评论 -
Photo Sphere Viewer的陀螺仪必须在https下才能开启,否则无效。!!!
我也是真的服了,找了七八个小时的问题,明明配置正确,代码ok,还找到react的代码对比,结果就是不行。最后翻github的issue,发现有人提到陀螺仪必须在https环境下才能开启。我尼玛啊。。。。!!!!!...原创 2020-10-12 20:26:25 · 596 阅读 · 5 评论 -
vue项目使用vant匹配rem时使用pxtorem的配置操作。
目标:能够正常使用vant组件库,且匹配公司现有的rem单位。版本信息:vue/cli3脚手架。postcss-pxtorem: ^5.1.1vue: 2.6.11vant:^2.10.2代码文件:vue.config.js中,找到module.exports位置,然后添加如下代码,懒得一句句解析了。module.exports = { publicPath, outputDir: 'dist', assetsDir: 'static', ...... css: {原创 2020-10-12 14:58:25 · 989 阅读 · 0 评论 -
vue/cli2和cli3框架下bable解决es6语法不兼容问题,适用于ie11,ie10的项目兼容。
我们引用一些第三方插件的时候,经常会出现node_modules中的es6语法没有被转换导致报错,而且这样的报错往往比较奇怪,无法直观的根据报错信息查看原因。例如缺少“;”,“无法识别”,等乱起八糟的报错。此时一般是通过babel来解决。对于vue/cli2脚手架搭建的项目来说,babel其实已经引入了,.babelrc文件也已经创建好了。但是实际操作的过程中,我们还是需要进行一些配置。配置文件位置是 build/webpack.base.conf.js然后找到module——rules找到b原创 2020-09-21 15:56:28 · 4142 阅读 · 1 评论 -
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
文章目录问题描述:解决过程:解决办法:问题描述:今天早上一开机,打开项目,发现项目一片醒目的红色,查看报错原因提示:Property ‘xxxx’ does not exist on type 'CombinedVueInstance<{ readyOnly: unknown; businessPrice: unknown; travelStaffInfo: any; } & Record<never, any> & Vue, object, object, obje原创 2020-09-04 11:13:25 · 8899 阅读 · 18 评论 -
vue项目的一些自动化操作写法。
文章目录1、自动化导入api模块。2、自动化导入注册vuex中的modules模块。3、利用vuex的plugins,实现自动同步vuex的数据到本地存储,或者从本地存储中恢复数据到vuex中。4、自动化注册路由。vue项目中,我们经常会引入路由模块,api模块,vuex模块,还有一些公用组件模块。每次都手动输入模块和路径,自然难免心生厌恶,只是个名字不一样,每次都得重新写一堆东西。于是自动化注册和自动化引入,就显得非常重要了。但是,其实所谓的自动化注册,核心思路就是通过require.contex原创 2020-08-18 18:22:05 · 747 阅读 · 0 评论 -
vue项目开发常用的vscode插件以及相关配置。
1、DotENV支持.env文件语法高亮,在你使用Node,或者vue/cli3框架中的环境变量文件非常有用。2、Import Cost显示导入的包的大小。3、Auto Rename Tag自动重命名配对的HTML / XML标签(必备)4、Auto Close Tag自动添加HTML / XML关闭标签(必备)...原创 2020-08-09 15:09:14 · 808 阅读 · 0 评论 -
vs code中通过设置snippets代码片段 快速生成html5,vue模板
按英文的!和h:5都可以快速生成html模板,但是找了半天都找不到如何修改模板设置。只好自己从snippets里重新编写了一个html5的模板,以免自己以后忘了。首先打开 snippets,然后输入以下代码段: "h5 sample": { "prefix": "h", "body": [ "<!DOCTYPE html>", &qu原创 2018-10-22 15:50:25 · 36676 阅读 · 6 评论 -
封装一个基础的vue搜索框组件
搜索框组件代码:<!-- 基础搜索组件。 --><template> <div class="search_wrap" :style="searchWrapStyle"> <!-- 搜索栏 --> <header class="searchBox"> <input type="text" class="input" :placeholder="placehol原创 2020-07-13 11:11:04 · 2179 阅读 · 0 评论 -
Vue项目使用less和css3的calc时计算错误问题解决方案。
起因:项目开发过程中,需要计算一个div版块的高度为100% - 0.48rem,于是很自然的想到了: .content { height: calc(100% - 0.48rem); overflow: scroll; word-wrap: break-word; word-break: normal; }打开控制台查看代码效果,却发现 高度和我预想的不对。而且99.52%这个数字似乎很眼熟,看了半天才发现99.52 = 100 - 0原创 2020-05-11 17:05:25 · 1693 阅读 · 0 评论 -
使用nginx解决开发环境下canvas的toDataURL转换线上地址图片时的跨域问题。
文章目录前言一级目录二级目录三级目录前言前端开发在合成二维码海报时,经常会使用html2canvas工具将二维码和海报合成一张图片。如果合成用的海报是项目本地图片,那没什么问题。但是如果合成海报的图片,是后台传过来的线上图片,那么就很可能由于跨域问题导致合成的线上图片是空白,只有二维码。报错如下:这时,聪明的你肯定想到了既然如此,那我们提前将需要合成的海报转换成base64不就ok了吗...原创 2020-04-01 01:29:00 · 1031 阅读 · 0 评论 -
如何在tslint.json中使用注释
正常情况下,tslint.json中是无法使用注释的,会报错。但是没有注释的情况下,对于代码交接很不方便,而且面对繁多的ts-lint规则,即使查阅文档也很麻烦。幸好,vscode中可以设置一下,将json文件关联成jsonc的格式,这样就可以使用注释了。选择【首选项】,【设置】在用户设置中,增加以下代码: "files.associations": { "tslint.js...原创 2019-12-17 11:54:00 · 811 阅读 · 0 评论 -
基于vue/Cli2下的typescript配置。
记录一下基于vue/Cli2下的typescript配置。或者直接使用此空白项目文章目录一、新建项目二、安装TypeScript相关依赖三、修改webpack配置。四、添加 tsconfig.json五、添加 tslint.json一、新建项目vue init webpack xxxx二、安装TypeScript相关依赖//安装vue的官方插件npm i vue-class-comp...原创 2019-12-17 11:39:59 · 2157 阅读 · 2 评论 -
vue cli 2.0项目改造ts中,提示找不到模块vue
vue cli 2.0项目改造ts中,提示找不到模块vue。不光是找不到vue,任何node模块都会提示找不到。如下图所示:{“resource”: “/f:/personnelProject/ts-cli2-sudoku/src/main.ts”,“owner”: “typescript”,“code”: “2307”,“severity”: 8,“message”: “找不到模块...原创 2019-12-17 09:55:01 · 7436 阅读 · 0 评论 -
Vue项目在vscode中使用eslint
老话说的好,无规矩不成方圆。最开始接触eslint的时候我也是一脸懵逼,怎么多一个空格就报错,换行多了报错,分号多了报错,变量未使用报错,没用驼峰命名报错…随手写一行代码能有十行报错,所以很长一段时间内不愿意启用eslint。但是随着项目经验的积累,团队开发协作的情况越来越多,现在只想对eslint说一句——真香。其实eslint规范虽然比较严苛,但是只要学会配置就真的很简单。以前的自己只是因为...原创 2019-12-05 10:42:06 · 1859 阅读 · 1 评论 -
vue/cli2下的webpack3升级webpack4记录。
前言:由于公司项目是历史项目,因此还是基于vue/cli2搭建的,webpack版本也是3.6.0。听说升级到webpack4之后打包速度贼快,所以早就想体验一下,但是又不敢拿公司项目开刀,因此先找一个以前写过的demo项目练练手。下面就记录一下vue/cli2下的webpack3升级webpack4中遇到的一些问题及解决方案。文章目录1、安装 webpack-cli ,升级webpack2...原创 2019-11-18 11:00:27 · 2343 阅读 · 4 评论 -
vue项目中,调用iframe子网页中的方法 和在iframe子页面中调用vue父页面中的方法。
目录描述一、vue项目调用iframe子页面中的方法。二、在iframe页面中,调用引用它的父页面中的方法。一、vue项目调用iframe子页面中的方法。父页面代码:<template> <div class="pjpccx"> <h1 class="title_color">{{ title }}</h1> <bu...原创 2019-11-08 16:40:14 · 12525 阅读 · 0 评论 -
防抖(节流)函数在Vue项目中的应用。
文章目录防抖函数应用方式一:直接import到每个组件单独使用应用方式二:函数式组件实现防抖。应用方法三:使用自定义指令封装防抖函数。防抖函数废话少说,先上一个防抖函数。关键是如何应用到vue项目中。/** * @desc 函数防抖 * @param func 函数 * @param wait 延迟执行毫秒数 * @param immediate true 表立即执行,false...原创 2019-09-10 17:05:46 · 4829 阅读 · 0 评论 -
连续票据号段,每次选择号段之后,根据已选号段和剩余号段,自动选择号段问题解决思路。
需求:在本项目中,添加选择票据信息时,每条票据信息都有一个指定的号码段,有起始号码,终止号码,隐藏的属性还有校验位信息,号码长度。要求用户每次选择号段时,会根据用户已选票据,和用户当前选择的票据信息对比,若属于同一种票据,则需要根据用户已选的票据,和该号段下剩余的票据,自动进行选择。选择规则:若剩余的票据号段是一整段连续号段,则自动选择剩余的全部号段为一条票据信息。若剩余的票据号段有多个...原创 2019-07-31 11:43:17 · 960 阅读 · 0 评论 -
从零开始搭建vue3项目框架。
从接触vue至今也写了不少项目,最开始用的2.x到现在的3.x,不同版本之间的项目框架构建差异性还是蛮大的,有时候自己也会搞混淆。今天就边写边边搭建一个基于vue-cli3的项目框架,参考Vue Cli的官网。安装看官网其实就非常清楚了。npm install -g @vue/cli# ORyarn global add @vue/cli创建一个项目运行以下命令来创建一个新项目,这...原创 2019-07-04 11:22:13 · 3174 阅读 · 0 评论 -
基于vue和FormData实现的无刷新头像上传(非插件),前端+后端处理简单处理方案。
场景描述:上传用户头像,一直是图片上传应用的经典场景,以前总是用其他库类中封装好的插件实现,没有深入的了解它的前端和后端实现原理。如果让自己不依靠框架和插件,八成都不知道该如何下手,昨天晚上想起来这个问题,觉得还是好好研究一下!为什么这里要特意提到无刷新呢?因为基于html的form表单提交的方式,默认是会导致页面重定向的。造成的影响就是页面看起来像是刷新过一样。解决的办法有很多,有使用隐...原创 2019-02-28 12:32:30 · 1146 阅读 · 0 评论 -
Vue中的监听器属性watch,监听对象的一些深入研究。
Vue中的侦听器属性watch使用的频率还是非常高的,但是对于其中的一些特性使用起来还是比较模糊,没有总结的特别到位。有次和同事为这事争论了半天,看到对方比较强硬自己就怂了,心想难道是我记错了?其实还是因为自己没有深入的探究过,虽然记得,但却没有实际的去验证!为了弄清楚这个问题(为了下次能吵赢 ),今天特意写了一些demo来验证一下。data中有以下属性,year是普通属性,yearList是数...原创 2019-01-23 13:30:45 · 7358 阅读 · 4 评论 -
npm报错合集。
一、npm ERR! cb() never called!报错原因:之前由于网速原因,导致安装失败的node_modules没有删除。解决办法:删除未安装完毕的node_modules文件夹,重新安装。...原创 2019-01-17 14:37:33 · 429 阅读 · 0 评论 -
零散知识点记录。
记录一些零散的知识点,未验证,以免自己忘了。1.A,B组件非父子组件时,生命周期状态如图。如果此时通过bus触发$emit事件,只能绑定在组件1的 beforeDestory上,因为只有这时B组件才已经生成并挂在完毕。2.还是bus组件问题,切换路由时,这个$on事件是不会自动清楚销毁的,需要我们手动来销毁。记得在B组件上的beforeDestory中绑定 bus.$off销毁事件。...原创 2019-01-10 15:18:26 · 305 阅读 · 0 评论 -
子组件多次复用且传参到父组件时遇到的一些问题。
问题描述:我们都知道,父子组件之间传参用props,子向父用$emit,兄弟间有bus。但是今天遇到个问题,A组件是一个selector选择器小组件,根据传参不同选择项目也不同,返回结果也不同。B组件中使用了4次A组件,传参都不一样,且需要将4次的返回结果都保存下来。其实就是下图4个自己封装的选择器,分别是A组件的4次复用,整个的大组件是B,B组件需要根据A组件的值来进行搜索,获取统计等操作。...原创 2019-01-10 00:50:23 · 4322 阅读 · 0 评论 -
vue开发环境下引入外部css和js
一、引入外部JS首先,外部js文件需要通过ES6标准导出,导出规则请参看下表。然后在需要引入js的组件中,根据上图规则来导入,即可使用。二、css或者stylus或者sass等。直接在需要导入的组件中,使用@import导入即可。...原创 2019-01-08 14:58:57 · 2394 阅读 · 0 评论 -
vue-cli安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
刚刚删除重装了nodejs,结果发现原来安装的vue不能用了,打算重新安装一遍,结果安装都挺顺利,但是vue命令都无法运行,一直报错“vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件”查看了一下npm全局安装包,里面确实有vue安装文件,且之前npm install -g @vue/cli安装的时候也没有问题,那么会不会是环境变量这里有问题呢?因为以前自学angular的时候就...原创 2019-01-04 23:34:01 · 39858 阅读 · 13 评论 -
Vue中创建全局组件,并且使用Vue.use() 载入。
自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from ‘module’ 导入即可。&amp;lt;template&amp;gt; &amp;lt;div class=&quot;app-NewsInfo&quot;&amp;gt; &amp;lt;h3&amp;gt;{{info.title原创 2018-12-19 09:32:41 · 3243 阅读 · 0 评论 -
VUE ROUTER-LINK 上添加点击事件
点击事件失败原因:router-link会阻止click事件,你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况解决方案:根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的...转载 2018-12-13 14:11:21 · 667 阅读 · 0 评论 -
v-for中通过动态绑定class来实现触发效果。
vue动态绑定class练习。:class=“{ ‘类名1’:条件表达式,‘类名2’:条件表达式… }”&amp;lt;template&amp;gt; &amp;lt;div class=&quot;app-*&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li v-for原创 2018-12-06 10:04:29 · 1105 阅读 · 0 评论 -
前端小坑,自填自用。
1.涉及到跨越数据传递时,localhost和 127.0.0.1并不相同,跨域允许设置的是 http:// 127.0.0.1:8080,项目访问路径http://localhost:8080/会报跨域错误,需改为http:// 127.0.0.1:8080。因为localhost需由Windows自动解析,也可以自己设置。localhost:也叫local ,正确的解释是:本地服务器12...原创 2018-11-26 17:50:39 · 184 阅读 · 0 评论 -
vue Bus总线
vue Bus总线有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。参考:http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1例子:https://segmentfault.com/q/10100000...转载 2018-11-24 14:15:32 · 376 阅读 · 0 评论 -
better-scroll实现菜单和列表滚动效果联动。
上一篇中,我们使用better-scroll实现了列表滚动效果,但是并没有与菜单栏关联起来,这里我们就实现左右联动功能。 解决思路:右侧滚动的时候,可以通过获取右侧列表栏实时的Y轴坐标,然后判断Y轴坐标落在某一个区间,记录下该区间的数组下标,判断左侧高亮的数组索引下标,绑定一个动态类赋予给标的菜单数组索引即可。...原创 2018-09-04 16:46:21 · 4161 阅读 · 0 评论 -
vue-resource的安装及使用,请求http数据。
1.安装vue-resource。首先在命令行中找到项目位置【非常重要】,然后输入:npm install --save vue-resource 安装成功后,打开项目的package.json可以查看到vue-resource的版本信息。 2.导入vue-resource在组件中使用之前,一定要先导入vue-resource。导入方法为: 打开main.js,输入...原创 2018-08-30 21:15:46 · 769 阅读 · 1 评论