後來9527-优快云博客

原创同时安装Vue2和Vue3

当我们的工作中使用的还是脚手架还是基于Vue2.x的版本，那么我们想要学习和使用Vue3怎么办？直接升级脚手架的话，会影响到我们现在的项目，那就需要去处理下关于Vue3的东西了。打开高级系统设置 -> 高级 -> 环境变量 -> 新建 -> 输入变量名和变量值 -> 确定。，点击选中它 -> 点击编辑，会弹出一个新的弹窗 -> 点击新建 -> 输入。Vue3的脚手架下载以后，还需要配置对应的环境变量，不然没办法全局使用。，但是需要注意的是，这个文件夹的名字不能包含中文字符。，输出版本号就代表我们成功了。

2022-11-28 15:13:09 1526

原创 Vue中的微信分享

Vue中的微信分享

2022-06-10 10:09:23 661

原创微信云开发

微信云开发

2022-06-08 17:00:49 5231

原创 Tyspscript中的class

Tyspscript中的class

2022-06-02 14:52:45 233

原创 TypeScript中的常用的数据类型

TypeScript中的常用的数据类型

2022-06-01 11:47:17 531

原创 TypeScript安装和使用

TypeScript安装和使用

2022-06-01 10:55:05 335

原创 Vue3-pinia（状态管理）

pinia是什么？这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。官网https://pinia.vuejs.org/下载npm i pinia使用mian.js 中引入 pinia，全局注册import { createApp } from 'vue'import { createPinia } from 'pinia'import Ap

2022-05-30 15:56:52 1421

原创 Node - Express

Express是什么Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。使用您所选择的各种 HTTP 实用工具和中间件，快速方便地创建强大的 API。Express 提供精简的基本 Web 应用程序功能，而不会隐藏您了解和青睐的 Node.js 功能。中文地址：https://www.expressjs.com.cn/使用下载npm i express --save构建指定文件// index.js 举例

2022-05-30 15:54:11 197

原创防抖和节流

防抖原理：把一个高频触发的事件延迟n秒触发，在n秒内再次触发这个事件的话，就重新计算这个n秒，让事件避免频繁触发/** 防抖* 防抖的原理是：把一个高频触发的事件延迟n秒触发，在n秒内再次触发这个事件的话，就重新计算这个n秒，让事件避免频繁触发*/function debounce(fn,delay) { let timer return function() { if(timer) { clearTimeout(timer)

2022-03-11 15:05:15 185

原创常见的CSS居中布局

flex布局.box { width: 500px; height: 500px; border: 1px solid red; margin: 100px auto; display: flex; /* 核心代码 */ justify-content: center; /* 核心代码 */ align-items: cent

2022-03-11 15:03:16 431

原创 webpack的source-map

source-map是什么？source-map是webpack提供最好的几个功能之一，是为了提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码的错误）如何使用module.exports = { entry: '', output: {}, module:{}, plugins: [], mode: 'development', devServer: {}, // 使用 source-map devtool: 'ev

2022-03-04 17:46:09 289

原创常见正则验证

证件1.身份证在不考虑那么完全的情况下，这个就够用了/^[1-8][1-7]\d{4}(?:19|20)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])\d{3}[\dX]$/这个是在充分考虑的情况下function validateSecIdCard (value) { if (!value) return true var iSum = 0 var sId = value var aCity = { 11: '北京',

2022-02-10 17:45:38 4535

原创 git命令

git的config命令查看当前git 的配置git config --list编辑git配置git config -e [--global]设置提交代码时的用户信息全局配置git config --global user.name "username" //配置用户名git config --global user.password "xx@mail.com" //配置邮箱项目中配置git config user.name "username" //配置用户名git conf

2022-01-27 15:46:46 912

原创 git的安装使用

下载，安装git地址：https://git-scm.com/download/win任何方式下载的安全的git都行，QQ电脑管家都能下载安装：没有什么特别的就不说了生成秘钥cd ~/.ssh如果是这样，就是已经生成过秘钥了。可以直接去C盘中的.ssh文件夹下面找id_rsa.pub文件，使用里面的公钥。如果不是这样的，而是显示其他的提示，如No such file or directory则表示没有生成过公钥。则需要配置:配置name和email// 这里的name和emil

2022-01-27 11:16:27 1268

原创 Node - http模块

htttp模块Node自带的服务器模块使用：const http = require('http')使用http搭建一个简单的服务器const http = require('http')// 创建一个Server实例let server = http.createServer()// 注册request 请求事件// 回调函数中两个参数，第一个是request，请求对象，第二个是response，响应对象server.on('request',function(req,res)

2022-01-25 17:04:06 2189

原创 Node - fs（文件系统）

什么是fs（文件系统）file system在Node中，与文件的交互是非常重要的，服务器的本质就是将本地的文件发送给远程的客户端Node通过fs模块来和文件系统进行交互该模块提供了一些标准文件访问API来打开，读取，写入文件，以及其他的交互Node中使用fs模块，const fs = require('fs')fs中的同步和异步fs模块中的所有操作都有两种操作形式，即同步和异步同步文件系统会阻塞系统的执行，也就是除非操作完成，否则代码不会往下继续执行了异步文件系统不会阻塞程序的执行

2022-01-25 17:02:45 1173

原创如何修改React项目的默认端口号

问题create-react-app默认端口号是3000，当有的别的项目占用该端口号时自己想使用别的端口号时解决方法早期是有config文件夹的，可以直接在里面找到start.js，去修改如果有config文件夹，且有start.js,直接修改接口没有的话，使用npm run eject,将配置释放出来再改那么除了第一种的把配置释放出来，我们还可以直接修改start.js里面的默认端口号目录: /node_modules/react-scripts/scripts/start.

2022-01-24 09:43:50 3668

原创 React生命周期

简单介绍挂载卸载过程1.1 constructor()1.2 componentWillMount()(即将废弃)1.3 componentDidMount()1.4 componentWillUnmount()更新过程2.1 componentWillReceiveProps (nextProps)(即将废弃)2.2 shouldComponentUpdate(nextProps,nextState)2.3 componentWillUpdate (nextProps,ne

2022-01-24 09:42:20 264

原创 Vue3中新的API

常用的 Composition API（组合API）setupVue3.0新增的配置项，值为一个函数setup是所有Composition API的组件中所用到的：数据，方法等等，均需要配置在setup函数中setup函数的两种返回值：若返回是一个对象，对象中的属性，方法，在模板中军可以直接使用若返回一个渲染函数，则可以自定义渲染内容setup的两个注意点：setup的执行时机：在beforeCreate之前执行一次，this是undefinedsetup的参数：props

2022-01-21 10:23:10 952

原创 Node-Buffer（缓冲区）

Buffer（缓冲区）Buffer的结构和数组很像，操作方法和数组也类似数组中不能存储二进制文件，而Buffer就是专门用来存放二进制数据的它的元素为16进制的两位数。一个元素就代表一个字节所以Buffer中每一个元素的范围都是00-ff之间00-ff转换成二进制就是00000000-11111111，这也是我们计算机最底层的一个0或者1，我们称之为1位（bit），8bit = 1byte（字节）在Buffer中存储的是二进制数据，但是显示的时候都是以16进制显示Buffer中内存不

2022-01-21 10:21:32 695

原创 Vue3-Suspense组件

Suspense试验性Suspense 是一个试验性的新特性，其API可能随时会发生变动。特此声明，以便社区能够为当前的实现提供反馈。生产环境请勿使用。以上是官方的警告！等待异步组件渲染一些额外的内容，让应用有更好的用户体验<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。这里就是之前说到setup的时候提到的，setup的返回值不能使用异步，但是如果像下面这样使用

2022-01-20 09:47:01 564

原创 Vue3-customRef

customRef作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。demo：实现输入数据，防抖效果<template> <input v-model="keyword"> <div>{{keyword}}</div></template> <script> import { customRef } from 'vue' export default {

2022-01-20 09:45:38 251

原创 Vue-provide和inject

provide和inject作用：实现祖孙组件间通信,即父组件定义，后面所有子代组件都能用套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据// 祖组件import {reactive} from 'vue'setup() { let car = reactive({ name: '奥迪', price: '100W' }) provide('car',car)}// 后代组件impor

2022-01-19 10:34:37 571

原创 NodeJS模块化的简单了解

NodeJS遵循commonJs的语法规范引入：require()导出：module.exports或者exportsNode中的模块化在Node中，一个JS就是一个模块在Node中，每一个JS文件的js代码都是独立运行在一个函数中，而不是全局作用域怎么证明是一个函数呢？我们可以输出只有函数有的：console.log(arguments)当我们输出 console.log(arguments.callee + ''),就会发现，输出的是一个函数。（arguments.callee保存

2022-01-19 10:32:56 358

原创 Vue3-hook函数

什么是hook本质是一个函数，把setup函数中使用的composition API进行了封装类似于Vue2中的mixin其优势，复用代码，让setup中的逻辑更清楚易懂Demohook函数文件:通常在src文件下新建一个hooks文件夹存放不同的hook函数，名称随便起，但是，一般来说，可能会使用use开头命名的文件// src/hooks/usePageXY.jsimport {reactive,onMounted,onBeforeUnmount} from 'vue'export

2022-01-18 09:59:09 767

原创 Vue3-computed

computed简写和完整版写法和Vue2都一样，只是使用不一样，需要单独引入使用，变成了一个函数<template> <h1><input v-model="firstName" /></h1> <h1><input v-model="lastName" /></h1> <div>{{fullName}}</div></template><scrip

2022-01-18 09:57:46 383

原创 Vue3-watchEffect函数

watchEffect函数watch：需要指明监视的属性，也要指明监视的回调watchEffect：不需要指明监视哪个竖向，监视的回调中用到哪个属性，就监视那个属性watchEffect有点类似于computed：computed注重的是计算出来的值，所以必须写返回值watchEffect更注重的是过程，所以不需要写返回值<template> <h1>{{num}}</h> <h1>{{msg}}</h>&l

2022-01-17 09:48:57 336

原创 Vue3-watch

watch和Vue2基本相似，配置是一样的两个坑：监视reactive定义的响应式数据时：oldVal无法正确的获取，强制开启了深度监视（deep配置无效）监视reactive定义的响应式数据中的某个属性（对象）时：deep配置有效<template> <h1>{{num}}</h> <h1>{{msg}}</h></template><script>import {ref,reac

2022-01-17 09:47:46 387

原创 Vue3-ref函数和reactive函数

ref函数作用：定义一个响应式的数据，或者说是生成一个引用实现对象语法：const xxx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象）JS中操作数据需要：xxx.value模板中读取数据：直接使用即可PS：ref接收的数据可以是基本类型数据，也可以是对象类型基本类型的数据：响应式是靠Object。defineProperty()的get和set完成的对象类型的数据：内部使用了reactive函数<template>

2022-01-14 09:24:48 258

原创 Vue3-setup

setupVue3.0新增的配置项，值为一个函数setup是所有Composition API的组件中所用到的：数据，方法等等，均需要配置在setup函数中setup函数的两种返回值：若返回是一个对象，对象中的属性，方法，在模板中军可以直接使用若返回一个渲染函数，则可以自定义渲染内容setup的两个注意点：setup的执行时机：在beforeCreate之前执行一次，this是undefinedsetup的参数：props：值为对象，包含外部传递过来，且组件内部申明接收了的属

2022-01-14 09:23:34 995

原创 Vue3的响应式数据的原理-Proxy

Proxy简介Proxy 也就是代理，它是window内置的函数，我们直接window.Proxy就可以使用语法// target: Proxy代理的源对象，可以是，对象，数组，函数，甚至是另一个Proxy// handler: 这个值，可以不配置，但是不允许不写，至少写一个空对象，不然报错const p = new Proxy(target,handler)使用let person = { name: '景天', age: 18}const p = new Proxy

2022-01-13 10:55:22 692

原创 Vue3生命周期

Vue3和Vue2生命周期对比更名beforeDestroy改名为beforeUnmountdestroyed改名为unmountedVue3中提供了Composition API形式的生命周期狗子，与Vue2中的狗子对应关系如下：beforeCreate — setup()created — setup()beforeMount — onBeforeMountmounted — onMountedbeforeUpdate — onBeforeUpdateupdated — o

2022-01-13 10:53:00 442

原创 JS字符串常用方法

字符串的常用方法字符串的方法很多，但是常用的就那么些，还有些都没有这么用过，下面简单介绍下1.charAt(index): 返回指定下表的值，返回值新的字符串，不影响原来的字符串let str = 'hello';let newStr = str.charAt(1);console.log(str) // helloconsole.log(newStr) // e2.charCodeAt(index): 返回指定下表的值的unicode值，返回值是Unicode码，不影响原来的

2022-01-12 13:36:15 211

原创 Flex布局

Flex的含义Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。.box { display; flex;}.box { display; inline-flex;}PS: 使用Flex布局，所有子元素的float，clear，vertical-alig你这些属性就会失效Flex的属性介绍1.flex-direction：该属性决定主轴的方向，即排列方式，默认row。.box { flex-direction: r

2022-01-10 17:05:06 224

原创 Cnavas基础介绍

MDN介绍canvas元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内…容将会在在旧的、不支持canvas元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。canvas 看起来和 img 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上， canvas 标签只有两个属性 —— width 和 height 。这些都是可选的，并且同样

2022-01-08 14:26:00 568

空空如也

空空如也