weixin_40579884的博客

原创 vue 经验总结

目录1.v-for循环与v-if不作用于同一元素2. v-for使用的时候，一定要同时定义key，且key最好为id一类，可以唯一标标识本条数据的字段。3.对象或数组属性改变，视图不相应更新4.利用js文件的缓存功能、对象和数组的引用类型，实现管理系统的 记住搜索条件和分页 等查询条件的功能。5.export 和export default6.vue中获取Dom节点的方法：...

原创 管理端项目改造-后期添加keep-alive缓存，结合@hook完成只缓存查询条件，列表数据更新

背景：已经是一个比较完善的后台管理系统，要添加列表页面搜索和分页等查询条件缓存具体需求：1.只缓存查询条件和分页，列表数据要刷新 2.从详情，和其他类似详情或者列表返回，需要缓存查询条件， 3.从新增，编辑页面返回列表，不需要缓存 4.切换菜单，A-B-A,不缓存A开发思路：1.尽可能少的改动业务文件，走配置解决问题，keep-alive无疑比较合适2.大部分的返回列表，是需要缓存的...

原创 推荐一个网站，给正在准备面试，或者进阶的小伙伴

地址：前端进阶之路即使不购买，按照目录自检一下，也不错

原创 vue-派发更新

原创 vue原理-render-脑图

原创 cookie，localStorage，sessionStorage的作用域，有效期等比较

sessionStorage localStorage cookie 有效期 当前浏览器tab关闭时清除 只要不主动删除，就一直保存 在设置的过期时间之前有效， 不设置过期时间，所有浏览器窗口关闭时过期 存储大小 相对cookie大得多，可以达到5M或更大 比较小，不能超过4kb 作用域 不可以在不同的浏览器 不可以在不同tab 必须同源 不可以在不同的浏览器 可以在同一个浏览器的不同窗口 可以在不同t...

转载 原型及原型链

首先，为什么需要原型及原型链？我们查看一个例子：function Person(name, age) { this.name = name; this.age = age; this.eat = function() { console.log(age + "岁的" + name + "在吃饭。"); }}let p1 = new Person("jsliang", 24);let p2 = new Person("jsliang", 24);console.l

转载 JavaScript 如何优雅的处理 async/await 异常

Async/await是 ES7 中的新特性，它可以让开发者编写异步代码像同步代码一样的确它给我们带来了很多方便的地方，但是在Async/await中如何来处理错误呢？在异步的调用中，会产生各种不同的错误，例如：HTTP 请求产生了错误、访问 DB 产生的异常、操作文件产生异常。在Promise的使用中，当承诺遇到了错误，它会抛出一个异常，该异常将被捕获到一个方法回调中。在Async/await中，我们又如何处理呢，当然很多人会回答：使用try/catch来捕获这些错误，这样一来代码会...

原创 统一项目编码风格（.vscode）

参考文档：vscode-workspace settings通过设置工作区域，可以在打开的工作区域上下文中，配置设置-setting，并且始终覆盖全局的个人用户设置。具体方法：将文件夹作为工作空间打开，工作空间设置将存储在.vscode / settings.json中，在这个json中，可以配置文件夹下生效的vscode设置，如下：我的setting.json：{ // 保存时自动格式化代码 "editor.formatOnSave": true, // eslint

原创 在父组件调用子组件的某个生命周期（ 在app.vue中，全局调用router-view路由页面的某个生命周期 ）

参考vue源码：/src/core/instance/lifecycle.js可以把子组件vm实例打印出来看一下，在$options 的 __proto__ 中，可以看到组件的生命周期和其他组件信息，并且生命周期是一个存放多个function的数组，name，如何调用子组件生命周期，就一目了然了调用方法：function callHook (vm: Component, hook: string) { const handlers = vm.$options[hook] if (h

原创 var, let 和 const

let和const是 ES6 新增的命令，用于声明变量，这两个命令跟 ES5 的var有许多不同.let/const 和 var的区别1.var声明的变量会挂载在window里，let/const不会2.let和const有块级作用域2.let/const会产生暂时性死区，在声明前使用会报referenceErro3.let和const不允许重复声明let 和const的区别1.const 用来声明常量，声明之后不允许赋值2.const 简单类型一旦声明就不能再更...

原创 vue项目中使用可选链 ( ?. )和双问号 ( ?? )配置

1.安装插件：@babel/plugin-proposal-optional-chainingnpm install --save-dev @babel/plugin-proposal-optional-chaining2.配置babel.babelrc文件添加plugins配置{ "plugins": [ "@babel/plugin-proposal-optional-chaining" ]}3.使用配置完了,就可以在项目中使用可选链 ( ?. ) 和双问号

原创 iframe 在firefox火狐浏览器 动态获取内容不展示问题

1.代码及问题vue代码<template> <iframe id="iframe" frameborder="0" allowtransparency="true" ></iframe></template>js代码mounted() { const iframe = document.getElementById("iframe").contentDocument || .

原创 H5的兼容性问题

1.H5的new Date('2020-05-02')在IOS环境报错valid Date在IOS中，new Date中指定的字符串有格式限制，‘-’短横线连接时间，在ios中不支持，在IOS中，支持‘/’斜线连接的时间格式，即：new Date('2020/05/02')可正常使用，且‘/’在安卓和web浏览器也完美兼容，可使用replace替代，如：new Date("2020-05-02").replace(/-/g,"/")2.H5在IOS安全区适配推荐使用@supports ..

原创 npm install -g 全局安装之后，使用命令报错：“不是内部或外部命令，也不是可运行的程序 或批处理文件”

全局安装的命令，使用的时候报错：“不是内部或外部命令，也不是可运行的程序 或批处理文件”解决方法：1.打开cmd，执行命令：npm config get prefix，可以看到npm安装的命令路径2.复制安装路径，接下来配置环境变量1）打开控制面板，搜索“高级系统”，点击查看高级系统设置2）点击高级，选择环境变量3）点击Path，选择编辑4）选择新建，粘贴刚刚复制的安装路径，点击确定，外层再点击一次确定，保存编辑5.重新打开cmd，输入全局安装的命令

原创 Vue3.0之双向绑定原理——Proxy

了解代理模式一个例子作为一个单身钢铁直男程序员，小王最近逐渐喜欢上了前端小妹，不过呢，他又和前台小妹不熟，所以决定委托与前端小妹比较熟的UI小姐姐帮忙给自己搭桥引线。小王于是请UI小姐姐吃了一顿大餐，然后拿出一封情书委托它转交给前台小妹，情书上写的：我喜欢你，我想和你谈恋爱，不愧钢铁直男。不过这样写肯定是没戏的，UI小姐姐吃人嘴短，于是帮忙改了情书，改成了我喜欢你，我想和你每天携手看潮起潮落，然后交给了前台小妹。虽然有没有撮合成功不清楚啊，不过这个故事告诉我们，小王活该单身狗。其实上面就是一个.

原创 vscode 添加代码片段（代码模板，注释模板等）

本文主要介绍在vue文件中，vue部分，js部分和css部分添加代码片段的方法主要使用Snippets工具官网地址：https://code.visualstudio.com/docs/editor/userdefinedsnippets使用示例：一、Snippets语法简介添加代码块主体及主要语法如下："Print to 代码块名称": { "prefix"...

原创 vue中css文件引入：src VS @import

在vue文件中，引入css文件常用的两种方式：1.使用src<style src="./index.css"><style>2.使用@import<style> @import './index.css' </style>因为没有加 scoped ，以上两种方式没有什么区别，作用域都是全局如果加上scoped呢？是否作用...

原创 vue-cli3 快速搭建项目

一、安装node.js去官网下载node.js，官网地址：https://nodejs.org/en/download/1. 本地安装，node.js一般不改变安装路径直接安装。安装完毕在命令行工具（Windows是cmd，苹果是终端控制）输入node -v和npm -v，如果能显示出版本号，就说明安装成功。（新版本node已经集成npm）2.安装cnpm：npm install...

原创 vue-router中，require代替import解决vue项目首页加载时间过久的问题

原因：vue的路由配置文件(routers.js)，一般使用import引入的写法，当项目打包时路由里的所有component都会打包在一个js中，在项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢，而用require会将component分别打包成不同的js，按需加载，访问此路由时才会加载这个js，所以就避免进入首页时加载内容过多。require: 运行时调用，理论上可以运...

原创 vue 利用高德地图的巡航轨迹， 做带进度条和倍速的轨迹回放

所用技术：vue，高德地图（amap），iview-slider绘制轨迹使用的是高德地图的 轨迹展示 功能对应demo地址：https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/simple-demo，api地址:https://lbs.amap.com/api/javascript-api/reference-am...

原创 vue 推荐插件

vue全家桶axios、vue-router、vuexUI 框架iView、Element-UI、Vant常用插件nuxt.js用于服务器渲染Vue项目的框架（利于seo）node-sass & sass-loader scss编译器less & less-loader less编译器vue-lazyload 懒加载图片vue-me...

原创 iview 踩坑总结

1.DatePicker 日期选择器v-model绑定获取的时间为UTC时间UTC时间格式：2019-04-16T09:12:43.083Z使用iview 日期选择器API自带的方法：on-change，该方法返回两个值，已经格式化后的日期，比如 2016-01-01，和当前的日期类型，比如 date2.表单校验修改的时候，回显明明有值，form表单validate却报错代码如下：...

转载 浏览器同源政策及其规避方法

浏览器安全的基石是”同源政策”（same-origin policy）。很多开发者都知道这一点，但了解得不全面。本文详细介绍”同源政策”的各个方面，以及如何规避它。 一、概述1.1 含义1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。所谓”同源”指...