SpringSir-CSDN博客

Pinia官网: https://pinia.vuejs.org/Pinia的使用(在Vue3和TypeScript的环境下1. 创建项目1.1 脚手架搭建1.2 安装pinia2. Pinia - Store2.1 创建Store2.2 Store详讲2.3 使用store中的状态2.3.1 简单访问store状态2.3.2 访问及简单修改store(标准操作)2.4 store - $patch 批量简单修改2.5 $patch怎么更新数组?2.6 总结: 修改状态数据的四种方式3. Pinia.

2022-03-06 03:19:06 11887 3

原创 vite+Vue3技术栈项目- 解决跨域配置代理

vite+Vue3技术栈项目- 解决跨域配置代理1. 跨域问题引入2. 解决跨域编码：3. 更改后端请求：4. 编码测试OK1. 跨域问题引入我的前端项目启动，是 http://127.0.0.1:3000需要访问的后端接口是：http://localhost:9693/httphwm/getList如果直接请求，会出现跨域问题，如下：2. 解决跨域编码：在项目根目录下，创建文件 vite.config.ts,配置文件如下：import { defineConfig } from 'v

2022-02-22 18:38:33 3336 1

原创 React, 事件处理函数中this是undefined的原因

把事件处理函数，赋值给点击事件，类似于把类中的方法，复制给变量这样一来, 原来的方法是由对象调用，this指向对象，而现在赋值给变量是直接调用，直接调用的话，this会指向window但是，类中方法是局部作用域，都是开启了严格模式，因此this指向是undefined代码释义上述内容:class Person { constructor(name){ this.name = name } handler(){ console.log(thi.

2022-02-09 17:04:20 1412 1

原创 TypeScript学习笔记

TypeScript学习笔记TypeScript概述和环境安装解析TS的工具包typescript安装简化执行TS的工具包 ts-node入门代码TS中的注释JS原有类型numberstringbooleanundefinednullobject对象类型基本使用对象类型中的函数写法arrayfunction函数类型的定义扩展 - 函数的参数默认值可选参数TS新增类型anyunknownvoidnever元组enum联合类型typeof 操作符类型断言断言语法断言扩展非空断言 !双重断言扩展 - 类型的其他用

2022-02-07 16:59:50 1791

转载 JS 浏览器地址栏传递参数，参数加密/解密（编码/解码）- 转载

我们有时候在JS里进行页面跳转，并且传递了参数（AppName），如下：window.location = “…/…/views/form/edit.html?AppName=新增”但是跳转之后我们用 window.location.search 取出来却成了这样：“?AppName=%E6%96%B0%E5%A2%9E”实际上浏览器在传参的时候对参数进行了编码，那么我们要用的时候就需要解码，解码方法有：1、decodeURI()2、decodeURIComponent()两者之间的区别是:

2022-02-07 13:51:56 3146

原创 JS中的void 0是什么意思?

void 0 的意思就是undefined;查阅资料说存在的意思是相对于undefined, 字节数变小了, 节省内存, 个人感觉主要是装逼用控制台打印 void 0 === undefined , 结果是 true在JS中, 一个函数如果没有return值, 那函数的返回值就是undefined, 根据这一特点, 编码时, 如果不做任何处理, 可以用void 0代替单个语句return...

2022-01-28 14:40:48 4849 1

原创使用ts-node报错error TS6231: Could not resolve the path ‘–v‘ with the extensions: ‘.ts‘, ‘.tsx‘, ‘......

报错内容解决执行命令 tsc --iinit

2022-01-26 13:56:46 3413

原创 TypeScript中any、unknown、void、never类型讲解

TypeScript中any、unknown、void、never类型讲解1. any2. unknown3. void4. never1. anyany: 表示任意类型都可以，开发中应尽量避免使用let app:any = document.getElementById('box')2. unknownunknown：一般来说，这个类型并不是开发者手写的，是网络传来的，需要配和断言使用（在使用的时候需要明确这个变量的类型，可以多次指定类型）type A = {name:string}t

2022-01-24 17:10:55 940

原创数组中出现次数最多的数和出现的次数

数组中出现次数最多的数和出现的次数let arr = [44, 44, 44, 11, 22, 33, 22, 11, 22, 33, 44]// 找出每个元素出现的次数let newObj = arr.reduce((accumulatorObj, value) => { accumulatorObj[value] ? accumulatorObj[value] = ++accumulatorObj[value] : accumulatorObj[value] = 1 retu

2022-01-20 15:58:24 610

原创 vue2.0动态代理详讲

2.配置示例 devServer: { proxy: { // 只要请求的路径中有 /pdf 就会走这个代理 '/pdf': { // 请求的路径会变成以下路径 target: 'http://61.186.254.137:20001', // 是否开启跨域(如果接口跨域，需要进行这个参数配置) chang

2021-12-16 14:27:23 1166

原创 PotPlayer下载及相关设置

打开视频默认尺寸播放无边框设置

2021-10-12 14:48:00 8449

原创前端-代码规范

@TOC前端-代码规范vue文件基本结构<template> <div></div></template><script> export default { components: {}, data() { return { name: '张三', // 用户名 age: '18' // 年龄,所有变量均需要注释 }; }, methods

2021-10-08 14:45:09 185

原创 Vue2.x和Vue3.x-自定义指令的用法及钩子函数

Vue2.x用法全局注册Vue.directive( 指令名, { 自定义指令生命周期 } )局部注册directives: { 指令名, { 自定义指令生命周期 } }使用v-指令名: 属性名.修饰符=“value值”钩子函数bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只是加入进了DOM, 但是渲染没有完成inserted - 自定义

2021-09-21 18:46:25 2083 2

原创 Vue的混入和继承

混入将多个vue文件内重复使用的功能代码，提取成单个js文件，在需要使用的地方进行调用即可。在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data 、methods、components等所有<script>中可以定义的代码。混入注意(重名情况)组件中的 data变量名和混入中的 data变量名, 发生重名时, 以组件为准;组件中的 methods，computed，wath名称和混入中的 methods，computed，wath名称名, 发生重

2021-09-21 02:38:15 3167 4

原创 Vue3-reactive函数、toRef函数、ref函数

reactive函数reactive用于定义响应式数据（可以理解成data的替代品）用法：导入 import {reactive} from ‘vue’使用：const state=reactive({ 参数名:参数值})访问： state.参数名访问： state.参数名toRef函数(了解即可)toRef：将响应式数据中某个字段提取出来成单独响应式数据用法：导入 import {toRef} from ‘vue’使用：

2021-09-21 01:40:53 364

原创回流(reflow) 与重绘(repaint)

回流与重绘目录浏览器的渲染机制注意回流与重绘回流重绘浏览器的渲染机制浏览器采用两个引擎来处理页面的工作, 不同的浏览器使用的渲染引擎不一样渲染引擎: Chrom和Safari使用"WebKit", Firefor使用"Geoko"js引擎浏览器会把html解析成 DOM树, 把css解析成 CSSOM(CSS对象模型);接着会把 DOM树和 CSSOM, 结合产生 render tree(渲染树);渲染树完成后, 浏览器会根据渲染树布局, 布局结束后会输出一个

2021-09-18 23:59:18 176

原创 http缓存

http缓存目录为什么要有http缓存?http缓存之强制缓存http缓存之协商缓存(对比缓存)协商缓存中的资源标识为什么要有http缓存?当输入网址到加载出页面, 电脑会经过"CPU计算、网络请求、页面渲染"等一系列步骤;“网络请求"是其中最不确定、最耗时的一个环节, 针对这个环节, 我们可以通过"减少网络请求的体积和数量”, 来更快加载出页面, 这是"缓存"存在的原因;通过"缓存"可以实现"减少网络请求的体积和数量";http缓存之强制缓存当第一次访问某个网站, 该网

2021-09-17 21:23:00 166

原创父子组件传参关于 .sync修饰符等用法

父子组件传参关于 .sync修饰符等用法单向数据流讲解Vue2.x使用定义事件的形式, 通知父组件修改.sync 和 update: 的使用父传子, 传递多个数据的简写采用v-model简写(要求严格)Vue3.x使用普通用法简写单向数据流讲解单向数据流（堆可以修改，栈不可修改）我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值但实际上, 对于修改值, 真正是:`基本数据类型不可修改，复杂数据类型不要修改引用地址（栈），它的值可以随便修改Vue2.x

2021-09-17 20:25:30 775

原创 Vuex中, getters和actions使用的补充

getters补充getters属性中的方法, 全参共有4个参数getters: { /** * state: 表示当前模块中的satate * getters: 表示当前模块中的getters对象, 一般是操作同级的其他方法 * rootState: 表示主模块的satate对象 * rootGetters 表示主模块的getters对象 * * 主模块也就是-index.js中 */ getName(state, ge

2021-09-15 12:01:29 1061

原创 Vue Router两种模式

hash 模式 (默认)工作原理: 监听网页的hash值变化 —> onhashchange事件, 获取location.hash使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转主要用在单页面应用(SPA)// 模拟原理// 监听页面hash值变化window.onhashchange = function(){ // 获取当前url的哈希值 const _hash = loca

2021-09-15 11:04:23 146

原创 Vue2.x和Vue3.x-路由钩子详讲及对比

Vue2.x和Vue3.x-路由钩子详讲及对比vue2.x前置概念:路由钩子分类路由和组件的概念(方便理解钩子函数)全局路由钩子路由配置守卫钩子组件内的守卫钩子路由钩子执行顺序vue3.x对比变化图区别补充:vue2.x前置概念:路由钩子分类一共分3类, 7个钩子路由和组件的概念(方便理解钩子函数)路由和组件是2个概念, 可以粗犷的认为:路由是浏览器网址组件是显示在网页上的不同内容全局路由钩子router.beforeEach(to, from, next){ } 前

2021-09-14 20:40:48 1006

原创 watch侦听器的使用-Vue2和Vue3

watch:侦听数据变化（某个值的change事件）vue2.x data（）{ return{ num:10 } }， watch:{ num:{ /* * newValue:当前值 * oldValue:修改上一刻的值 */ handler(newValue,oldValue){ // doSomething .

2021-09-13 18:36:54 148

原创兄弟组件通讯bus-Vue2和3比较

vue2.xVue.prototype.$bus=new Vue()监听： this.$bus.$on(‘方法名’,(参数)=>{}),它可以累加触发： this.$bus.$emit(‘方法名’,实参值)销毁:this.$bus.$off(‘方法名’)，谁监听谁销毁注意: 由于监听可以累加, 所以必须要有第四步销毁vue3.xtiny-emitter插件用法安装插件 npm i tiny-emitter导入使用import emitter from ‘tiny-emi

2021-09-13 18:05:36 171

原创 vue刷新页面的两种方法(provide / inject的应用)

方法1：直接调用函数将整个页面重载, 以下两种都可以window.location.reload()this.$router.go(0)方法2：采用provide / inject(静刷新)在高阶函数中声明一个reload刷新函数<template> <div id="app" v-if="show"></div></template><script>export default { // 控制显示/隐藏, 实现

2021-09-13 17:57:53 645

原创 vue给v-html渲染出的页面添加样式＞＞＞

在选择器中, 使用 >>><template> <div v-html="data" class="box"> </div></template><script>export default { data(){ return{ data:"<h1>Hello JavaScript</h1>" } }}&l.

2021-09-13 17:34:05 415

原创面试-event loop（事件循环、事件轮询）机制-微任务与宏任务

前置知识JS是单线程的语言;微任务: promise.then()方法宏任务: 定时器, 网络请求, 渲染页面注意: new Promise()的时候, 是同步代码画图释义

2021-09-12 18:27:31 199

原创跨域原因, 多种解决方案

跨域原因是由于浏览器的同源策略限制;跨域指: 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域JSONP这种方式并不适用于开发, 可以说是被完全淘汰, 但是由于实现复杂, 面试官对于这种方案的深究非常追崇.核心思想：网页通过添加一个<script>标签的src属性，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。缺点:需要后端配合才能完成只能发送get请求实现:注意后端返

2021-09-11 18:37:51 139

pinia学习笔记pinia学习笔记

typescript官方一手教程

TypeScript学习笔记

Vue 开发环境初始配置.docx

vscode中, git只提交部分修改的代码文件.docx

前端web-jQuery.md

element-plus，el-table，每一行鼠标悬浮的时候，颜色如何自定义