LPLIFE的博客

出现这个的原因：windows 环境下， git 在我们 pull 代码的时候，会自动识别当前的系统环境。将原本的（linux/unix）换行改成对应系统的，在我们提交代码的时候又会转成远程系统环境的（Linux/unix）,然后又装了 eslint，默认就是使用 LF，所以就会报这个错误各种环境下换行符格式window：CRLF(\r\n 或者^M\n)mac: CR(\r 或^M)linux/unix: LF(\n)解决方式：1. 在 vscode 的文件代码底部的 CRLF 手动切成 LF

出现这个的原因：重复跳转路由，场景：当下路由是/home，反复点击跳转到/home。解决方式： 跳转前进行判断是否同一个路由，不同则跳转，相同则不跳转。

clipboard复制粘贴封装使用场景涉及的主要技术使用组件里单独引入更高级的使用方式1：封装成独立的工具库方式2：全局自定义指令使用场景项目中有点击复制文本的功能涉及的主要技术vue-directiveelementclipboard使用cnpm install clipboard --save or yarn add clipboard --save组件里单独引入<!-- Target --><input id="foo" v-model="name" /&

需求背景：h5上传图片到oss，并返回图片的链接参考资料：阿里云ossmultipartUpload api图片纯前端JS压缩的实现注意：以下不包括业务代码，纯个人处理的oss上传封装，替换成自己的临时凭证的接口即可使用const OSS = require('ali-oss');/** * * @param {图片base64位地址} url * @returns */const loadImage = function (url) { return new Promise((

<!-- * @Descripttion: 上拉加载、下拉刷新 参考：https://youzan.github.io/vant/#/zh-CN/list * @version: * @Author: peri.lu * @Date: 2021-06-01 * @LastEditors: peri.lu * @LastEditTime: 2021-06-01--><template> <div class="shop-list-all"> &l

背景多人协作开发时，统一的代码风格会提高代码可阅读性、可维护性，提高开发、迭代的效率。减少以下几点问题的出现：低级错误：如重复定义同名对象的属性（由于默认代码不会报错，代码量多时，自检也会看不见）代码格式不统一重复覆盖频率高：迭代需求修改的可能仅仅几行代码，但查看代码修改记录，有大部分都是格式冲突，一直重复覆盖其他人的代码格式，开发体验不太友好，应少数服从多数，遵循业界普遍规律，切勿特立独行。代码冗余：不需要的组件、方法、变量、图片，特殊原因保留时应给予注释说明，否则应该及时删除。隐藏bug：有

我的面试也告了一个段落，总结一下我面试的心得：机会一定是留给准备的人的。计算机行业，并不是你要求职的时候，才去做相应的准备和突击应付，实干和踏实应该是要具备的。相关的技术知识应该渗透到平时的工作中，应知应会。有自己的方向和目标，不用很大的目标，小小的目标...

$router路由器，是vue-router的一个实例对象，包含单页面应用整个路由器的信息（options）、当前的路由信息（currentRoute）、路由跳转方式（back、go、push、replace、forward）、全局导航守卫信息（beforeEach、beforeResolve）等， 详细参数信息router-实例属性创建const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component:

前端开发完项目之后，会进行打包，就会涉及到性能优化的问题，想要进行性能优化，首先要知道哪里可以进行优化，可以借助工具帮助分析文件哪里可以进行优化：可视化分析包大小# NPM npm install --save-dev webpack-bundle-analyzer# Yarn yarn add -D webpack-bundle-analyzer在vue.config.js中配置：module.exports = { chainWebpack: config =>..

背景：vue中如果想从一个页面到达另一个页面，可以使用路由来实现。官方文档-vue-router以下都是个人看文档和结合实际开发时用到的理解：路由主要为我们实现以下功能：嵌套的路由/视图表：如：app.vue<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | .

为了提高开发效率，一些复杂的功能的实现，往往不是我们从头到尾开发的，而是用别人做好的轮子，加上自己的美化和加工制造出自己的"车子"。这些轮子是以依赖包的形式（模块化开发的时候）引入我们的项目的，开发者一般会附上详细的使用说明文档，我们只要遵循文档的规范和说明，就可以轻松地实现想要的功能。为什么我们非要用别人造好的轮子？项目复杂度 = 业务复杂度 + 功能复杂度从开发者的角度，想...

v-show：仅仅是通过样式属性display控制元素的显示方式true：display：block；false：display:none;如：<template> <div> <div v-show="show">v-show</div> <button @click="handl...

常用的vue移动端组件库：官网需求场景：弹窗上还有一层弹窗（如弹窗上的日期组件），使用MintUI中的mt-popup来实现惯性思维，会这样写：<mt-popup> <mt-popup></mt-popup></mt-popup>这个是错误的,这样导致层级错误正确写法：<mt-popup></m...

方式一：去掉样式的所属 scoped，改为全局的（要避免重名影响）方式二：写在app.vue中（推荐）

传参方式改为：this.$router.push({ path: "/result", query: { resultData:encodeURIComponent(JSON.stringify(res.data)) } });解析： this.resultData =JSON.parse(decodeURIComponent(this.$route.que...

解决方式（计算属性改为以下写法）： computed:{ isReceive:{ get: function () { return 1; }, set: function () { return 2; } ...

<div class="result_content"> <p v-for="(item, index) in list" :key="index">{{item}}</p> </div> <div class="result_content"> <p v-for="(ite...

锚点定位且不改变urlhtml事件触发&lt;li v-for="(item,index) in couponsList.swaps" :key="index" @click="toTegional(index)"&gt;{{regionalList[index]}}&lt;/li&gt;锚点埋藏 &lt;div v-for="(item,index) in .

下面啰嗦一点，真实场景，很实用部门的富察傅恒 ，为项目赶进度，加入了我的队伍。在看到我写的30几个弹窗后，反复调用三次，本来我的思路是： 父组件到子组件，再从子组件回到父组件。交互多的时候，就是一直在转圈，子到父，父到子，子再到父，父再到子。其中还要把参数、方法从父组件传到子组件，传递的还不止一个，我自己都觉得难受，越写到后面，越是写不下去。来了富察傅恒给出了一个方法，使用vue的slot可...

如下图片，会自行向 上“滚动” &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;跑马灯 &lt;/title&gt; &lt;script src="https://cdn

 组件名为多个单词组件名应该始终是多个单词的，根组件APP除外。 这样做可以避免跟现有的以及未来的HTML元素相冲突，因为所有的HTML元素名称都是单个单词组件数据组件的data必须是一个函数 当在组件中使用data属性的时候（除了new Vue外的任何地方），它的值必须是返回一个对象的函数export default { data() { retur...

使用淘宝镜像（下载包比较快） npm install -g cnpm --registry=https://registry.npm.taobao.org执行以下命令cnpm install qrcodejs2 --save-devcnpm install qrcode --save -devhtml代码 &lt;div class="hello"&gt;...

我花不到十分钟集齐了五福！确保安装了git、 nodejs 安装淘宝镜像，（安装其他包的时候，会自动把cnpm替换成npm，安装依赖会相对比较快） npm install -g cnpm --registry=https://registry.npm.taobao.org安装vuecnpm install vue生成一个简单的架构vue create hello-...

命令安装依赖：yarn install less -Dyarn install less-loader -D在main.js中import './assets/style/reset.less'

由于日常使用vue和react两种框架开发（看项目），容易混淆，于是记录一下：vue： <p v-bind:class="[message.length !==0 ? 'activeClass' : 'errorClass']"> {{tip}} </p>样式： .activeClass { colo...

作用：子组件想要控制到父组件的状态。场景：有些复杂的交互，就不得不自制弹窗（造轮子），需求：点击蒙板或者关闭按钮就能够关闭，子组件是一个弹窗，父组件中控制弹窗的出现和消失，同时又想在子组件中关闭弹窗，而不对父组件的交互产生任何影响。方法一：全局变量去控制弹窗是否出现or关闭方法二：使用$emit传递父组件中写好的方法。关闭弹窗的操作在父组件进行如下边的closed，当触发子组件的时候，...

意思是需要的是Number类型，但是传递了String类型转换成合适的类型就可以了

年少无知的我原先是这样调用子组件中的方法的引用子组件（父组件中）： <ShareBottom ref="child"/>其中ref相当于赋予子组件一个ID的引用，可以当成标识来看。调用子组件的方法（父组件中）： <div @click="this.$refs.child.shareClick();">分享</div>需要改为...

组件之间的通信主要分为：父子组件之间通信非父子组件之间的通信（兄弟组件、隔代关系组件等）八种通信方式1. props 、$emit2. children、children 、children、parent3. ref4. provide 、reject5. Vuex6. $attrs 与listenters7. eventBus...

父组件向子组件传递参数子组件使用props获取但是当子组件中代码异步的时候，可能会出现mounted中取不到传递过来的参数的情况。解决方式：子组件添加监听，如下：export default { props: ['itemData'], data () { return { } }, watch:{ it...

添加： mode: 'history',export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ]})

使用绑定的形式获取图片路径正确写法：&lt;img :src="imgUrl"&gt;错误写法1：&lt;img src="{{imgUrl}}"&gt;错误写法2：&lt;img src= {{imgUrl}}"&gt;