albedo_102的博客

原创 WOS与CNKI数据库的citespace分析教程及常见问题解决

本教程为面向新手的基于citespace的数据可视化教程，旨在帮助大家更快了解行业前沿的研究内容。

原创 Day57：组件库封装-1

封装element组件参考对象npm i使用vue3建库如果报错可以尝试禁用vs的 vetur 插件，这是vue2插件，会给vue3项目报错(禁用了之后需要重新加载src新建components文件夹下面新建Button文件夹，新建vue，ts，css文件使用postcss书写样式在APP引入script setup lang=ts引入自定义前缀button并在appvue视图中实现给button不仅要添加自定义type，也要添加原生的type。

原创 Day56：组件库封装-TypeScript入门

b既可以是字符串类型也可以是数字类型，如果想访问b的length类型——如果b为number类型，则length不存在，只有b为string类型时，才可以访问b身上的length——当一个变量可能存在多个类型时，可以使用断言来缩小它的类型。如果在定义方法的时候定义它需要传入和返回同一种类型的参数，则在实际使用的时候传入什么样的参数，则传入和返回的都是这个参数的类型。编译ts代码-需要使用tsc编译之后才能运行，TS为JS的衍生，浏览器不能直接识别TS语法：tsc xxx.ts。接口，接口描述对象或者函数。

原创 Day46-50：统计图表项目总结

四个头部卡片中拥有一些相同逻辑，并且都接受了rportData，可以将相同的逻辑使用mixin（混入，用来提取公共逻辑）抽离出来。在.eslintrc.js中的rules里书写一个'vue/multi-word-component-names': 0，将命名必须要大驼峰的规则去掉。给vue的prototype原型对象挂载的属性，可以在入口中给每个组件实例都注入一些成员。新建TotalSale.vue，使用CommonCard组件写卡片中的内容。将三个组件vue引入index，注册，写在视图中，添加样式。

原创 Day46：项目-购物车案例

getProductsList方法最好使用async和await语法，而不是等价的.then。因为async和await语法不涉及大量的回调函数，也就不用进行大量的回调函数嵌套，处理起来更简单不容易出错。

原创 Day45：Element-Plus

Vue生态中包含了大量优秀的组件库，经过快速的学习，我们就能把这些现成的组件应用到自己的项目中了。

原创 Day44：Pinia和购物车案例准备

一直以来VueX都是官方为Vue提供的状态管理库，但是在Vue3的版本中，尽管VueX4也能提供组合式API，但是自身存在的很多缺陷让官方重新编写了一个新的库，也就是我们今天要学习的Pinia，结果发现这个新的状态库比起VueX要更加实用，它已经正式成为了Vue的官方推荐，而VueX仍然可以使用，但不会继续维护了，显而易见，Pinia才是未来的主流，所以必须学习它，它的设计思路和VueX非常类似，所以对于已经熟练掌握了VueX的开发者而言，学习Pinia非常轻松！

原创 Day43：VUEX

这里介绍的VueX是匹配Vue3的V4版本，它绝大多数功能使用都和之前基本保持一致。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

原创 Day42：网易云项目，路由进阶

"/" : ""}}route.query是一个响应式对象，但route.query.song是一个响应式对象里的值，如果要对这个值进行监听，需要写一个函数包装他，并返回值，这样就不会出现报错了。某些复杂的组件关系存在层级更深的路由，这是可以利用路由嵌套来实现，给需要添加二级路由的路由对象添加children属性来配置二级路由，同样使用来渲染出口。可以将任意信息添加到路由对象上，比如页面标题，鉴权认证等，Vue中的路由提供了一个meta字段，可以通过给每个路由对象配置meta字段来添加信息。

原创 Day41：Vue路由基础

路由切换页面的时候，视图改变了，前端的路径也变了，但是没有重新访问该页面。可以说是视图和url的匹配关系。vue2对应的是路由的v3版本，vue3对应的是路由的v4版本。

原创 Day40：vue原理

通过验证，Vue3中的响应式确实更加强大，现在利用Proxy来尝试实现它，Vue3中提供了reactive方法内部即是利用Proxy来实现的，可能有的同学会疑惑那不是还有一个ref吗，ref处理基础数据类型的时候仍然是沿用Vue2的那一套方法，而且基础数据也不存在操作对象和数组的问题。在Vue2中，我们会把数据放到配置选项data中，一旦我们这样做了，我们心里清楚此时一旦视图中的操作修改了data中的数据，视图会立刻(这个立刻仍然需要等待一个异步更新队列 在nextTick中讨论过这个问题)自动更新。

原创 Day39：vue3setup语法糖与动画

中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits，注意，这2个方法不必从vue中引入可以直接使用。})<p v-red>这是一个段落</p><p v-color="'blue'">这是一个段落</p>

原创 Day38：vue3入门

vue3相较于vue2，性能提升了，打包效率提升，渲染效率提升，内存减少源码重构（使用Proxy代替defineProperty实现响应式），还有全新特性vue2使用配置选项写法vue3中不再使用配置选项写法，而是使用组合式api——Composition APIvue2中使用props和this.$emit进行组件通讯vue3中父组件给子组件传递一些数据，并且希望子组件中的按钮能触发父组件中的数据自增，这是一个父子通信的典型场景。

原创 Day37：万年历

- 兄弟组件通讯需要通过父组件中转 -->需要使用其中数据或方法时，需要从index.js文件的方法中return属性才能调用，调用方法可以直接在app.vue中import { initList, initTime } from './utils'在项目开始的时候，新建一个与存放子组件的components文件夹同级的utils文件夹，在其中新建一个index.js文件，用来封装工具方法。在top中接收自定义方法，并监听，监听到的值就是newValue，将其赋值给视图中显示的值year和month。

原创 Day36：组件进阶和插槽

在生命周期中经常使用的是：mounted（发送http请求，进行Dom操作，连接服务器等），beforeDestroyed（清除副作用，取消连接服务器，清除全局定时器，清除一些订阅消息。可以使用<template #default="x">在父组件中引入子组件的内容，其中x是一个对象，使用解构语法可以导出不同的自组建中的数据。vue是数据驱动视图的框架，一般情况下，操作的数据，Dom操作由框架来实现，不能用document.querySelector。可以使用eslint插件对格式进行校正。

原创 Day35：组件与生命周期

用的最多的是mounted，在页面加载完成后自动触发，比如发送axios请求其次是beforeDestroy，将一些没用的东西比如用完的定时器之类的销毁掉。

原创 Day34：待办事项项目与组件化脚手架

使用对象名绑定样式 :class="classObj" data: { classObj:{'plum':false,'green':true} },class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。数组绑定 :class='数组' 数组元素的值需要和类名相一致。组件化——对视图的拆分，能将大的视图拆分成更小的单元。

原创 Day33：vue入门3-自定义指令、计算监听属性深入

自己模拟vue官方实现一个指令。

原创 Day32：vue入门2-计算属性，监听属性

的作用是用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。操作：选中id=2的元素，从前面插入3号，发现被选中的元素下移，被选中的元素改变但选择的位置没有改变。计算属性是由data中的原始数据计算而来，原始数据改变了，计算属性也会跟着改变，视图也会更新。v-else指令是v-if指令的附属指令，它在v-if指令条件不满足的时候，才渲染。相当于使用innerText填充。相当于使用innerHtml填充。

原创 Day31：vue入门

一套用于构建用户界面的渐进式框架。

原创 Day30：GIT代码托管

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。保密程度高一般使用集中式。

原创 Day29：用户管理系统；yarn命令，webpack和拦截器

它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在响应数据之前，对响应体的一些处理，通常为数据统一处理等，也常用于判断登录是否失效。就是使用axios的get请求，获取要修改的那个用户，并将它的信息展示在页面上。使用axios的delete请求，获取要删除的用户的id，提交到后台删除。然后再将修改后的数据，通过put请求，发送到后台，进行修改。使用axios的post请求，获取表单数据，提交到后台。除了npm命令以外，还提供了yarn命令实现包管理。

原创 Day28：接口编程，异步编程

ajax是一种无需重新加载整个网页的情况下，更新部分网页的技术。

原创 Day27：HTTP

http://localhost:3000/ 或者 http://localhost:3000/index 响应的内容为首页。假设访问路径为http://localhost:3000/detail?id=3 id为3的详情。假设访问路径http://localhost:3000/detail?ip和域名是一一对应的关系，在域名服务器中存放，并提供了二者的转换。http://localhost:3000/list 响应的是列表页。http://localhost:3000/aaa 乱输，页面找不到。

原创 Day26：NODE模块化

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。为了让Node.js的文件可以相互调用，Node.js提供了一个简单的模块系统。在每一个自定义模块中，都有一个module对象，里面存储了和当前模块相关的信息。官方提供的用于操作文件的模块，提供一系列操作稳健的属性和方法，方便用户操作文件。在自定义模块中，定义的变量、方法等成员，只能在当前模块中使用，不能跨模块使用。

原创 Day22：async-await

封装方法中的return是为了返回一个对象，对象就可以继续调用then，如果不return，则会返回undefined，undefined调用then方法就会报错。如果拆开写，则最后一个方法不用写return new，如果前面不写，则会无法控制第二个then的执行时机，不能实现可控连续调用，因此不推荐。调用方法中的return是为了将promise内容抽成对象，对象就可以继续调用then，如果不return，则调用的执行时机难以控制。对比开始的时候的时间和现在的时间，如果间隔小于指定时间，就等待。

原创 Day21：三大系列总结

想要获取元素的大小和位置，offset更方便（主要用于获取想要修改元素的属性，使用style更方便（主要用于设置offset经常用于获取元素的位置（offsetTop offsetLeft）client经常用于获取元素的大小（clientHeight clientWidth，包含内边距，不含边框）scroll经常用于获取滚动的距离（scrollTop垂直滚动 scrollLeft水平滚动）

原创 Day20：ES6语法

而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。原理：每创建一个定时器，就会形成一个块级作用域，块级作用域内的i，互不影响，最后执行定时器的时候，打印的是各自块级作用域中的i。调用父类方法, super 作为对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类。

原创 Day19：THIS和函数进阶

函数类型命名函数匿名函数构造函数字面量对象中定义的方法事件处理函数定时器里面的函数立即执行函数格式：(function(形式参数){函数体})(实际参数)<script>// 命名函数console.log('命名函数中的this')f1()// 匿名函数console.log('匿名函数中的this')f2()// 构造函数console.log('构造函数中的this')console.log(this) // 创建的那个对象// 字面量对象中定义的方法。

原创 Day18：预编译-作用域链-本地存储

全局对象（Global Object）：浏览器环境中，js引擎会整合所有的script标签内容，产生一个全局对象，这个对象就叫做window对象。就是一个数据结构，函数内部是可以嵌套函数的，每一次嵌套都会形成新的作用域，把这些作用域串起来，就形成了作用域链。只要是代码，都会在一个作用域中，写在函数内部的就在局部作用域；如果这个作用域内部还有函数，那么在这个作用域内，又可以诞生一个新的作用域，就形成作用域链。现在b函数内部有四个作用域，GO（2），a函数（1），b函数（0），c函数（本身）

原创 Day17-面向对象5：BOM对象

浏览器对象模型（BrowserObjectM作用：JS有能力与浏览器“对话”比如：弹框，新建窗口，跳转到其他页面，实现定时效果组成：Window 窗口对象 表示浏览器中打开的窗口。Location 地址栏对象 用于获取当前 URL 的信息，并把History 历史记录对象 包含用户（在浏览器窗口中）访问过的 URL。Screen 屏幕对象 包含有关客户端显示屏幕的信息。Navigator 浏览器对象 包含有关浏览器的信息。操作思想将浏览器的各个组成部分抽成对象，以面向对象的方式来操作。

原创 Day16-面向对象4：事件

事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。实际开发中，很少使用事件捕获，对事件冒泡更关注。网景公司最早提出的观点是，事件开始是由DOM最顶层的节点接收，然后逐级向下传播到最具体的元素。IE 最早提出的观点，事件最开始是由最具体的元素接收，然后逐级向上传播到DOM最顶层的节点。//设置当前按钮背景颜色前，先把所有的按钮的背景颜色清除掉（排他事件）事件发生的时候，会在元素节点之间按照特定顺序传播。可以是, 可以是元素节点，文本节点，注释节点。

原创 Day15-Js5：面向对象3

","love":"单身的有可能会遇到一个令你心动的人，不妨主动一些，展开一段美好的恋情。","work":"目前的进展可能不太顺利，但并不代表你要放弃，持续学习和进步，成功总会属于你的，暂时是积累经验储备知识能量的一天，建议提高行动积极性。","money":"不要过于放松警惕，合理安排和管理自己的财务，避免过度消费和冲动购物。"},"luckynumber":"9","luckycolor":"深蓝","luckyconstellation":"摩羯座"}}'

原创 Day14-Js4:面向对象2-Array

元素并返回删除的元素。

原创 Day13-JS3：面向对象1

通过stu1里面存的地址到堆区中找到这块空间，然后访问study，发现study存的地址（其实是一个方法），根据方法的地址找到这个匿名方法，再调用方法。类是模板，对象是根据类模板创建出来的一个个真实存在的个体。类是月饼模子，对象就是根据模子制造的月饼，月饼可以吃，模子不能吃。通过stu1里面存的地址到堆区中找到这块空间，获取里面的name属性的值，返回给调用者。var stu1 = new Student('张三',23,'上海')var stu2 = new Student('李四',24,'北京')

原创 Day12-JS3：循环，数组，函数

if只有一句，可以不要花括号。arr.length 为数组的长度，最多取到长度-1，所以写为<arr.length或者<=arr.length-1。1.如果函数没有显示的调用return，函数就没有返回值，如果强行接收，接收的值就是undefined。// 删除，删除后数组长度没发生改变，只不过该位置变成了空白.相当于该索引的元素离开了，但是房还在。弊端：一个写死的函数没法做别的用处，想用做别的用处，可以借助函数的参数来实现。// 一个人，从二十岁开始上班，寿命是80岁，60岁退休，打印xx岁在上班。

原创 Day11-JS：流程控制，选择语句，循环语句

执行顺序：1--2--4--3>2--4--3>2--4--3>2--4--3……把('请输入第' + i + '位学生的成绩')改为(`请输入第${i}位学生的成绩`)，动态获取i值拼接入内容。1、从上到下，依次判断每一个条件，如果满足，就会执行相应的语句体，剩下的条件即使满足，也不会执行。var age = Number(prompt('请输入您的年龄：'))var gender = prompt('请输入您的性别(男/女)：')2、如果前面的条件都不满足，就会执行最后的else语句。

原创 CSS学习内容总结

原创 Day9-CSS7：object-fit，粘性定位，媒体查询，Grid布局

使用 @media 注意 从大屏幕到小屏幕适配@media（max-width：像素值）{当前像素下的样式从小屏幕到大屏幕适配@media（min-width：像素值）{当前像素下的样式。

原创 Day8-CSS6：flex布局，个人简历项目

​ 有拉伸，就拉伸的跟父类一样高 ​ 子元素空间动态分配 ​ flex：数字 ​ 代表占据父控件剩余尺寸的份数。1.将father设置50%宽，拖动浏览器，发现子元素没有跟着放大，因为flex-basis默认为auto（项目本身的大小）,可以认为是子元素的初始宽度。在：root中声明的属性相当于一个全局的属性，只要在当前页面中引入了：root所在的文件，就可以使用var（）函数来引用。/* 想要实现子元素垂直居中，现在垂直方向是主，主轴垂直居中，实现justify-content: center */