cc°　　淡忘-CSDN博客

原创 C/C++开发环境配置

下载后解压并放至你容易管理的路径下（我是将其放在了D盘的一个software的文件中管理）

2024-05-02 15:03:11 297

原创小程序给v-for生成的元素随机值不生效

今天用uni-app开发项目时写了个动画，让v-for生成的每个元素不同的上下浮动。起初觉得挺简单的因为浮动动画都一样的，只要给每个元素一个很小时间的延迟间隔（animation-delay）就可以了。

2023-03-31 17:33:40 609 1

原创 vue项目seo优化-预渲染prerender-spa-plugin配置

Vue是SPA单页面应用对SEO不太友好，如果你只是需要对少数页面需要做SEO处理（例如 / 首页，/关于我们等页面），可以使用预渲染 prerender-spa-plugin (插件)

2022-11-09 16:52:13 2960 1

原创 vue项目二级目录（非根目录）部署，prerender-spa-plugin配置

Vue二级目录项目用 prerender-spa-plugin 做 SEO 优化，构建项目无法完成也不报错，一直卡在浏览器检测阶段

2022-11-09 16:49:53 1316 2

文章目录前言javascript部分一、闭包二、栈内存和堆内存三、原型对象、原型链、作用域链四、说一下JS继承（含ES6的）1.什么是继承：2.如何实现继承1）Js继承：构造函数继承2）Js继承：插入继承3）ES6：（类）继承五、call()、apply()、bind()的用法及区别前言结合高频面试题对前端各知识点做个汇总，并对部分知识点单独详解有试题答案，因为是根据面试题来做的所以知识点会有点乱没有先后顺序就当看面试题吧！javascript部分一、闭包闭包就是打通函数外部访问函数内

2022-05-23 15:37:57 1444

原创 yarn的安装配置和使用

下载安装使用官方的installer.msi直接安装yarn官网下载地址下载之后一步步安装即可。使用npm命令安装在此之前必须已经安装了node和npm(node自带npm)npm install -g yarn

2022-04-17 13:25:21 233

原创 Vue中的scoped实现原理和样式穿透方法及原理

scoped一、什么是scoped，为什么要用在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。二、scoped的原理为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原

2022-02-23 15:22:47 17678 5

转载 vuex持久化插件使用

目的让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。应用场景在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储。再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页需要存储在本地。步骤首先：我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。npm i vuex-persistedstate假设 modules 下有 user.js 和 cart.js文件需要持久化

2022-02-21 14:14:57 443

原创组件间传值通信（父传子、子传父、兄弟组件传值）

文章目录前言一、父传子二、子传父三、兄弟组件传值前言组件间传值通讯分为三种1、父传子2、子传父3、兄弟组件传值一、父传子父组件：<son :msg=“fatherMsg”></son>子组件：props:[‘msg’]//父组件<template> <div> <son :msg="fatherMsg"></son> </div></template><script&g

2022-02-14 14:39:24 678

原创 JS执行机制（同步、异步、微任务、宏任务）

一、关于javascriptJS是一门单线程语言，这意味着所有的任务都需要排队，前一个任务结束才会执行后一个任务如果前一个任务耗时很长，后一个任务就不得不一直等着。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。二、同步任务和异步任务单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待。为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允

2022-02-07 23:37:39 2224

原创 JS赋值、浅拷贝、深拷贝的区别，实现方法及缺点

一、了解赋值、浅拷贝和深拷贝赋值：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。深拷贝：会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。二、浅拷贝的方法1. Object.assign()Object.assign() 方法可以

2022-02-05 16:30:16 1007

原创 call()、apply()、bind()的用法及区别

call()、apply()、bind()的用法及区别

2022-02-05 15:36:11 667

原创 JS原型对象、原型链及其优缺点，以及原型链与作用域链的区别

文章目录前言一、原型对象的定义二、构造函数、实例、原型对象的关系关系图三、原型链四、继承五、原型继承的缺点六、作用域链七、作用域链和原型链的区别前言介绍1.原型对象、原型链及其优缺点2.原型链与作用域链的区别一、原型对象的定义在js中，每个对象都有一个与他关联的对象，这个对象就叫做原型对象（实例对象的[[Prototype]]、构造函数的prototype），他可以使多个对象共享一个或者多个方法。注意：[[Prototype]]在Chrome中为__proto__，__proto__的

2022-02-04 21:18:24 1091

原创 forEach方法如何跳出循环

forEach和普通的for循环是不同的，它不是普通的遍历，本身不能使用break，continue这两个关键字，无法跳出循环，必须遍历所有的数据才能结束。实现continue的效果可以直接使用return。实现break的效果可以使用try、throw Error()，通过跳出错误的方式跳出循环。forEach方法跳出循环示例function getItemById(arr, id) { var item = null; try { arr.forEach(.

2022-01-19 09:41:57 5675

原创 uni-app为组件uni-icons添加自定义图标

步骤1.将自定义的图标上传到 [阿里字体图标库 https://www.iconfont.cn/search/index ] （这里要以 SVG 格式上传），或者借鉴的图标,，然后将代码下载下来, 接下来要用到下载的 ttf 文件。(1) 上传或者添加别人的图标上传添加别人的图标(2) 下载文件(3) 得到ttf文件2.进入 uni-App 官方图标界面, 打开控制台 Network 模块, 过滤出字体的请求信息, 点击下载 ttf 文件(在ttf文件那右键点open in new

2021-11-03 12:02:51 2188

原创前端移动端测试查看控制台

手机端查看控制台的工具console.log是前端经常用的，但是在手机上想查看却看不了，这时候我们就可以用这个工具了。当我们在项目开发时,想要在实机上看控制台，在link的标签后面加入如下代码(放在link后面,也就是head里的js的最前面)<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script><script>eruda.init();</script>

2021-10-13 16:12:04 1210

原创【微信小程序】onShow中接收参数

问题描述：想在页面加载和跳转页面返回时重新获取数据，但是onShow接收不到跳转传的参数原因分析：onLoad：页面第一次加载时触发，从跳转页面返回时不能触发，可以传递参数onShow：页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数解决方案：onShow(){ // 获取当前小程序的页面栈 let pages = getCurrentPages(); // 数组中索引最大的页面--当前页面 let currentPa

2021-09-27 17:16:23 2854

转载 Vue+element ui el-table数据导出到excel

一、安装依赖：npm install --save xlsx file-saver二、在放置需要导出功能的组件中引入import FileSaver from 'file-saver'import XLSX from 'xlsx'三、HTML中的设置，简单来说就是给需要导出的table标签el-table上加一个id如exportTab，对应下面的exportExcel方法中的 document.querySelector(’#exportTab’)四、在methods中设置真正实现导出转换e

2021-05-06 10:43:07 1404 1

原创前端vue绘制关系结构树图

前言需求：纵向关系树图，自定义节点边框，且文字纵向排列，树图可拖拽可缩放一、效果图二、准备工作vue，图表采用AntV G6编写AntV G6快速入门三、完整代码<template> <div> <div id="tree"></div> </div></template><script>import G6 from "@antv/g6";export default { data()

2021-04-20 17:12:00 5401 3

原创 vue中使用AntV G6 — 基础篇

阿里AntV-G6使用介绍一基础篇AntV G6 官网AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。文章目录阿里AntV-G6使用介绍一基础篇一、G6 是什么？二、使用步骤1.安装&引入2.基本使用三、结果图一、G6 是什么？G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。二、使用步骤1.安装&amp

2021-04-20 16:36:29 15703 6

原创 vue拖拽排序插件vuedraggable使用方法详解

一、在vue项目中，用npm包下载下来npm install vuedraggable -S二、下载下来后，引入插件，在你的vue文件的script标签里面这样引入import draggable from 'vuedraggable'三、注册组件components: { draggable},四、在template标签里面使用<draggable v-model="colors" @update="datadragEnd" :options = "{animation:50

2021-04-08 11:54:03 909

原创 npm install 不变更 package-lock.json 文件的解决方法

问题描述：git上拉下来的项目 npm install 安装依赖后 package-lock.json 文件发生变更原因分析：package-lock.json 文件是版本锁定文件package-lock.json 是在 npm install 时候生成的一份文件，用以记录当前状态下实际安装的各个 npm package 的具体来源和版本号。package-lock.json 文件的作用锁定安装时的包的版本号，并且需要上传到 git，以保证其他人在 npm install 时大家的依赖能保证一致

2021-04-06 16:28:22 4474

原创 Unsupported URL Type “npm:“: npm:vue-loader@16.2.0

问题描述：使用npm脚手架时，报错`Unsupported URL Type "npm:": npm:vue-loader@16.2.0`原因分析：npm版本过低查看版本：`npm -v`解决方案：升级版本使用命令行：`npm install -g npm`

2021-04-06 10:51:38 6010 1

原创 Git Bash 可以正常使用，但cmd不能使用git命令

问题：正常安装git，在Git Bash中可以正常使用git命令，但cmd不能使用git命令原因：没有设置git 环境变量1.找到git\bin 的目录，复制路径；（我的是在C:\Program Files\Git\bin;）2.在环境变量的path中添加；（添加在用户变量或系统变量的path中都可以）3.重新打开cmd后输入git；...

2021-03-29 10:19:23 5353 1

原创 Git 回溯版本

在我们写项目的时候，可能会遇到代码报错改不回来了或者产品需求突然不改了要回到之前的样子等情况，这时候突然想要回到以前提交的某个版本的代码的时候就可以用到Git的版本回溯了版本回溯：1、查看之前的commit的id，找到想要还原的版本git log2、还原到之前的某个版本git reset --hard 版本号例如：git reset --hard 73f41798cbfa6ef7f9483d2f61b2086f8a134c41...

2021-03-04 16:23:23 2769 1

原创 vue实现调用手机软键盘右下角变更为搜索按钮并进行搜索

一、出现问题ios，input添加type=“search” 手机软键盘右下角仍为换行，如下图二、处理方法<form action="" @submit.prevent="onSearch"> <input type="search" :placeholder="请输入关键字搜索" v-model="value" /></form>.prevent 修饰符：阻止表单默认提交。submit 点击默认行为是提交表单，这里并不需要它提交,只需要

2021-02-20 10:48:39 1735

原创 vue路由跳转传递参数方式

一、直接在路由中写参数（刷新页面参数不会丢失）//路由配置文件//需要配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail}//跳转时页面var id = 1;this.$router.push({ path: `/detail/${id}`,})//跳转后页面获取参数this.$route.params.id二、通过query属性传值（刷新页面参数不会丢失）//路由配置文件{ path: '

2021-02-18 14:18:26 311

原创点击事件监听，点击其他区域隐藏弹窗、下拉菜单、提示框

实现效果：弹窗、下拉菜单、提示框等在没有遮罩层时可以通过监听点击事件来控制弹窗、下拉菜单等的显示隐藏。思路：监听mouseup松开左键时，判断控制pop元素显示隐藏的变量show是否为true（显示状态），再判断点击的位置是否是pop元素，如果不是则隐藏pop元素示例 mounted() { document.addEventListener("mouseup", e => { var pop = document.getElementById("pop"); .

2021-01-27 15:29:12 944

原创 vue组件中的.sync修饰符使用

.sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是经常使用的。在vue的组件通信props中，一般情况下，数据都是单向的，子组件不会更改父组件的值，那么vue提供.sync作为双向传递的关键字，实现了父组件的变动会传递给子组件，而子组件的carts改变时，通过事件机制，修改父组件的cart。完成了子组件carts和父组件cart的双向映射。// 父级中调用子组件<son :show.sync="show"></son>//当子组件需要更新 show 的

2021-01-18 17:34:30 780

原创 js生成固定长度的含字母和数字的随机字符串

function RandomRange(len) { var returnStr = "", arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', '

2020-10-09 09:54:23 753

空空如也

空空如也