小张的前端之路-CSDN博客

原创 vue项目登录记住密码

登录记住密码的思路就是将账号密码存入cookie中，

2021-08-12 16:28:46 967 1

"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’ //echarts5报错错误原因：//引入方式不对import echarts from 'echarts解决方案：//将引入方式改为：import * as echarts from 'echarts';//或者const echarts = require('echarts');this.$el.querySelectorAll is not

2021-07-21 11:32:30 423

原创 js的深浅拷贝

浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝上面这句话对深浅拷贝已经说的很明白了，为了更好的理解深浅拷贝，先得明白一些基础的概念。js数据类型数据类型Value存放位置基本数据类型String、Number、Boolean、Undefined、Null、Symbol栈内存引用数据类型Object、Array、Function堆内存栈内存、堆内存.

2021-07-05 20:20:34 238

原创理解promise、promise.all、promise.race

一、promisePromise 对象代表了未来将要发生的事件，用来传递异步操作的消息。 Promise 对象有以下两个特点:1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。2

2021-07-02 19:09:42 4307

原创递归遍历tree类型，将所有某个属性放在一个数组里面，数组扁平化处理

const data = [{ name: '中国', children: [{ name: '教第三节课', }, { name: '食谱', children: [{ name: '大一', children: [{

2021-06-29 23:37:17 636

原创 ES5、ES6数组去重

ES6一、利用Set去重<script> function sole(arr) { return Array.from(new Set(arr)) } var arr = [1, 2, 3, 4, 1, 23, 4, 21, 2, 4, 1, 5] document.write(sole(arr)) </script>Array.from()方法就是将一个类数组对象或者可遍历对象

2021-06-28 00:02:41 1524

原创 js输出字符串中出现次数最多的字符与次数

function returnMaxStr(str) { //定义一个对象用于保存str的每一项以及出现次数。 var obj={}; // 去除字符串中的空格 str = str.replace(/\s*/g,""); //遍历str,循环其中的每一个字符，将某个字符的值及出现的个数拿出来作为json的key和value for(var i=0;i<st

2021-06-27 23:10:33 971

原创 vue-cli4创建vue项目

安装vue-clinpm install -g @vue/cli-service-global创建项目文件vue create 项目名称List item

2021-06-09 11:33:49 382

原创前端生成二维码

方法1：qrcodeqrcode.js是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas绘制而成,不依赖任何库。可以快速的在web页面中绘制出二维码。看一下效果每张二维码的内容是不一样的，title里面内容就是二维码的内容安装依赖npm install --save qrcodejs2导入方法import QRCode from 'qrcodejs2'使用<template> <di

2021-05-28 19:34:02 2310 4

原创 vue中echarts图表随父元素的大小改变而改变

需要使用到的插件：element-resize-detector欣赏一下效果安装npm install element-resize-detector使用<template> <div id="left"> <vdr class="vdring" :parent="true" :w="400" :h="300" :min-width="225" :min-height=.

2021-05-08 16:44:39 2579 3

原创 vue-draggable-resizable——可拖拽缩放的组件

此组件是Vue 用于可调整大小和可拖动元素并支持冲突检测、元素吸附、元素对齐、辅助线。1.安装npm install --save vue-draggable-resizable2.导入如果使用的地方较多可以选择在main.js中全局导入import Vue from 'vue'import vdr from 'vue-draggable-resizable-gorkys'// 导入默认样式import 'vue-draggable-resizable-gorkys/dist/Vue

2021-05-08 16:02:50 4753 2

原创使用vue baidu map小结

文章目录安装全局引入使用效果绘制图形开启滚轮缩放设置地图类型获取经纬度跟zoom地图视图安装NPMnpm install vue-baidu-map --saveCDN<script src="https://unpkg.com/vue-baidu-map"></script>全局引入在main.js文件里面，不过要先在百度地图开放平台申请ak（密钥）import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMa

2021-04-09 13:32:44 1891 1

原创 vue项目使用echarts

安装依赖npm安装npm install echarts -S或者用淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -S全局引入在main.js中引入import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 注意：一定要注意引入引入方式，否则会报错若有报错可参照vue中使

2021-04-02 17:32:08 806

原创 vue中使用echarts报错：“TypeError: Cannot read property ‘init‘ of undefined“报错原因及解决方案

文章目录报错原因解决方案报错原因通过npm安装的是最新版echarts依赖，5.x版本，而5.x版本的引入方式有所改变，所以造成按4.x方式引入报错，官网已经明确说明解决方案将main.js中引入echarts的方式由4.x引入方式：import echarts from 'echarts' 换为5.x引入方式：import * as echarts from 'echarts'就ok了...

2021-04-02 17:30:38 8690 5

原创 vue——修饰符

.prevent阻止标签的默认事件例：contextmenu事件在元素中用户右击鼠标时触发并打开上下文菜单，意思就是右键单击的时候会打开菜单并且执行自定义事件<button @contextmenu="menu">按钮</button>而用了.prevent修饰符再右键点击就只会执行自定义的事件，不会执行默认打开菜单的事件<button @contextmenu.prevent="menu">按钮</button>.stop阻止

2021-04-01 16:31:27 217

原创 vue——slot插槽

文章目录什么是插槽？插槽内容后备内容什么是插槽？插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。插槽内容简单来说就是在父组件中给子组件模板，子组件直接可以通过使用。1、在子组件left中放一个占位符<template> <div id="chlid"> <h1>我是子组件</h1> <slot></slot&

2021-03-30 18:10:55 543

原创防抖节流使用场景、vue中使用防抖和节流

文章目录防抖 (debounce)：重在清零节流 (throttle)：重在加锁第一种：直接使用第二种：封装公用的方法总结：百度了一下防抖和节流的使用场景：防抖 (debounce)：重在清零防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢登录、发短信等按钮，避免用户点击太快，以致于发送了多次请求，需要防抖调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多

2021-03-24 10:45:53 1141 2

原创 vue——组件通信

常用的组件通信方式：父子组件通信（props）子父组件通信（$emit）兄弟组件通信：我们都知道，vue的两大核心就是数据驱动和组件系统，但组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。往往我们都要通过组件之间传递数据来达到数据同步，所以组件之间的通信就显得尤为重要，下面归纳一下组件通信常用的的几种方式：父子组件通信（props）父组件：<template> <div class="home"> <child :msg="fa

2021-03-22 16:04:49 318

原创 Vue-cli3.X、Vue-cli4.X项目中使用px2rem

文章目录第一步：安装postcss-px2rem第二步：在 vue.config.js 中添加配置第三步：添加 rem.js文件第四步：引入rem.js文件第五步：重启服务第一步：安装postcss-px2remnpm add postcss-px2rem第二步：在 vue.config.js 中添加配置const px2rem = require('postcss-px2rem')const postcss = px2rem({ remUnit: 32 //基准大小 baseSiz

2021-03-19 17:51:34 4029 6

原创 element-table中使用vue filter 过滤器

今天看到这样一个问题：原先遇到这种需要转换的情况，我都是使用template通过判断row.scope的值进行操作的，像这样：<el-table-column prop="level" label="名称"> <template slot-scope="scope"> <span v-if="scope.row.level == 1">一级</span> <span v-if="scope.

2021-03-19 17:40:58 1590

原创 vue项目回车键登录、登录密码是否可见

在前端登录的时候，往往会有个登录的按钮，点击一下就可以进行登录操作，有时候我们想按了回车键就可以登录，这样的话登录起来会更加的方便，密码要求比较严格的话可能会有特殊符号，我们想知道自己输入的正确与否又不想通过登录来验证的话，就可以做一个控制密码是否可见的按钮，就以vue项目的登录页面为例介绍一下回车键登录以及注意事项。先看一下不同状态下的效果：密码不可见：密码可见分两个部分：一：回车键登录：在基础的登录步骤完成之后添加回车键登录效果，没有建好基础登录效果的请先自行解决，这里不细说，其实回车键

2021-03-18 17:19:38 816

原创 var a={}, b={key:‘b‘}, c={key:‘c‘}； a[b]=123； a[c]=456； console.log(a[b])；结果为什么是456？

今天在一个技术交流群里面看到这样一个问题：var a={},b={key:‘b’},c={key:‘c’};a[b]=123;a[c]=456;console.log(a[b]);//为什么是456？我也不懂什么原理，打印确实是456，那么一起来搞搞，看他为什么是456吧。开始猜测是属性值的覆盖，因为我也打印a[c]了，结果也是456，在查阅文档之后发现我是瞎猫碰上死耗子，a[b]的值为456是因为b跟c都作为对象，而普通对象的属性名如果是对象的话要先转为字符串，那这样下来的话，就是属性

2021-03-15 17:44:34 2072

原创 vue实现列表自动滚动、向上滚动的效果

推荐使用vue插件：vue-seamless-scroll个人使用的感受就是，棒极了！简单，快捷看一下效果图：懂我意思不，它向上滚动！使用肥肠方便，设计非常银杏，下面我给老铁演示一下第一步：安装cnpm install vue-seamless-scroll --save第二步：在main.js中引入import scroll from 'vue-seamless-scroll'Vue.use(scroll)第三步：使用<template> <div .

2021-03-12 16:17:19 5611 8

原创 vue项目动态设置浏览器标题title几种方法

方法一：使用vue-wechat-title插件设置第一步：安装插件npm vue-wechat-title --save第二步：在main.js全局引入、使用插件import VueWechatTitle from 'vue-wechat-title' //动态修改titleVue.use(VueWechatTitle);第三步：在通过路由的mate属性携带titleconst routes = [{ path: '/login', component:

2021-03-12 15:29:11 7934 1

原创 node更新版本之后npm不支持的问题

今天老板叫我去解决个问题，说是项目下载了npmi的时候报错，由于自己没遇到过这样的错误，再加上英文不好，光看错误就看半天，后来发现是npm不支持node版本导致的错误。找到错误根源了那就开始干，刚开始认为是node版本过高了node -v看了一下才是8.x的版本，我的都12.x.x了那肯定不是node版本过高的问题，再npm -v看了一下npm的版本:5.x.x，然后觉得可能是npm版本过低的问题，后来更新npm的时候发现根本就无法通过npm的命令来操作，还是最初的问题，node与npm的版本不匹配.

2021-03-11 16:16:32 3702 3

发育中的前端