禁止摆烂-才浅-CSDN博客

原创前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia，实现 Pinia 的持久化，优化Pinia（仓库统一管理）

（这里以user.d.ts为例）；代码展示：export type User = {// 头像// 脱敏手机号 - 带星号的手机号// 用户名id: string;// 用户id。

2024-03-13 21:08:53 1489

原创前端开发小技巧【Vue篇】 - 样式穿透 + 绑定变量

【代码】前端开发小技巧【Vue篇】 - 样式穿透 + 绑定变量。

2024-03-13 21:08:19 401

原创前端面试题 ===＞【HTML】

置换元素置换元素的内容来自外部，该元素仅是外部资源的占位符；；非置换元素非置换元素内容来自当前文档，必须使用双标签；；重绘当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘；重排和重绘相反，当改变布局的时候，就会引起重排；重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）；

2024-03-13 21:07:10 613

原创前端面试题 ===＞【CSS】

块级元素：默认垂直排列，可以设置宽高；；行内元素：默认水平排列，设置宽高不生效；span...；行内块元素：默认水平排列，可以设置宽高；；不管是哪种盒模型，都是由以下四部分构成：；分类：标准盒模型：；设置的 width 只是盒子内容的宽度；额外设置都会改变盒子的大小；IE盒模型（怪异盒模型）：；；我们设置的宽度就是盒子本身的宽度，额外设置不会改变盒子的大小，他会去压缩内容的宽度；

2024-03-13 21:06:18 1142

原创前端开发 - 【Git】 - 相关操作命令合集

【代码】前端开发 - 【Git】 - 相关操作命令合集。

2024-03-13 20:26:04 646

原创前端 - 笔记 - JavaScript - 基础【输入输出 + 变量常量 + 数据类型 + 运算符 + 流程控制 + 数组 + 对象 + 函数 + Math】

前言HTML 表示网页的结构；CSS 表示网页的样式；JavaScript 表示网页的行为；浏览器内核 = 渲染引擎 + JS引擎；JavaScript的组成：ECMAScript — JS的基础语法；Web APIs：DOM — 操作文档流的属性和方法（文档对象模型）；是HTML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式，可以在程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象（包含属性和方法）组成

2024-03-13 20:22:21 847

原创前端 - 笔记 - JavaScript - 高级【深浅拷贝 + 异常处理（throw、try-catch） + this指向 + 性能优化（防抖 + 节流）】

❗❗开发中我们经常需要复制一个对象。和只针对。

2024-03-13 20:21:19 909

原创前端 - 笔记 - JavaScript - 进阶【作用域 + 函数进阶 + 解构赋值 + 对象进阶 + 内置构造函数 + 构造函数 + 原型】

push()作用将一个或多个元素追加到数组的末尾，并返回追加元素之后数组的length语法返回值⚠追加元素之后数组的length代码展示：const arr = [1, 2, 3];// 追加元素之后arr的length// 5forEach。

2024-03-13 20:19:56 913

原创前端 - 笔记 - JavaScript - WebAPI【DOM + 事件类型 + Date+ 节点操作 + window + 本地存储 + 正则表达式】

前言Web API：是一套操作网页内容（DOM）与浏览器窗口（BOM）的对象；API：就是一些预定义好的方法，这些方法可以实现特定的功能，开发人员可以直接使用；Web API：浏览器提供了一套操作网页和浏览器的方法，通过这些方法可以轻松的操作元素和浏览器；复杂数据类型用 const 声明：复杂数据类型放在堆里面，栈里面存放的地址指向堆里面存放的数据，变的只是堆里面存放的数据，存放数据的地址不变；变量名 ➡ 栈地址 ➡ 堆数据；解释：cons

2024-03-13 20:19:05 946

原创前端面试题 ===＞【JavaScript - WebAPI（进阶）】

window对象表示浏览器中打开的窗口；所有的全局函数和对象都属于window对象的属性或方法；它是一个顶层对象，而不是另一个对象的子属性document对象该对象是window对象的一个属性，是显示于窗口或框架内的一个文档；区别window指窗体，document指页面；document是window的一个子对象；用户不能改变（因为这是当前显示文档的位置），但是，可以改变（用其他文档取代当前文档）；本身也是一个对象，不是对象；正则表达式，也被称为regex或regexp。

2024-03-13 20:08:28 892

原创前端面试题 ===＞【Ajax、请求】

TCP是因特网中的传输层协议，使用建立连接，完成三次握手，与服务器开始传送；第一次握手：建立连接时，发送包（syn = j）到服务器，并进入等待状态，等待服务器确认；SYN：同步序列编号；第二次握手：收到SYN包，必须确认客户的SYN（sybn = j + 1），同时自己也发送一个SYN包（syn = k），即SYN + ACK包，此时服务器进入等待状态；

2024-03-13 20:07:37 922

原创前端面试 ===＞【ES6】

Promise是解决异步编程导致的地狱回调问题（异步编程不方便）；Promise是一个容器，里面保存着异步操作的结果；从语法上来讲，Promise是一个对象，从他里面可以获取异步操作的结果；特点Promise的状态不受外界的影响:Promise对象代表一个异步操作，有三种状态，pending、fulfilled、reject，只有异步操作的结果才可以决定Promise当前是哪一种状态，其他任何操作都无法改变这个状态；一旦状态改变，就不会再变，任何时候都能获取异步操作的结果;

2024-03-13 20:06:55 1064 1

原创前端面试 ===＞【Vue3】

mixin。

2024-03-13 20:06:22 973

原创前端面试 ===＞【Vue2】

Vue中每个组件都是一个实例；组件共享data属性，当data的值是同一个引用数据类型的值时，改变其中一个会影响其他的；组件中的data写成一个函数，数据以函数返回值的形式定义，这样每复用一次组件，就会返回一份最新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护自己的数据；单纯的写成对象的形式，就会使得所有的组件实例共享一份data，就会造成一变全变的结果。$nextTick是在下次DOM更新循环结束之后执行延迟回调。

2024-03-13 20:05:37 999

原创前端面试题 ===＞【JavaScript - 高级】

一个作用域可以访问另一个函数内部的局部变量，或者说一个函数（子函数）访问另一个函数（父函数）中的变量，此时就会有闭包产生，那么这个变量所在的函数我们就成为闭包函数；简单来说，就是一个内部函数访问了外部函数的变量，此时就会有闭包产生；优点延伸了变量的作用范围；因为闭包函数中的局部变量不会等着闭包函数执行完就销毁，因为还有别的函数要调用它，只有等着所有的函数都调用完了他才会销毁闭包造成的内存泄漏，如何解决：用完之后手动释放；实现数据的私有化；注意。

2024-03-13 20:04:18 833

原创 Vue3全家桶 - VueRouter - 【6】导航守卫

【代码】Vue3全家桶 - VueRouter - 【6】导航守卫。

2024-03-11 20:41:52 951

原创 Vue3全家桶 - VueRouter - 【5】声明式导航与编程式导航（导航到不同位置 + 替换当前位置 + 路由历史）

一、声明式与编程式导航1.1 导航到不同的位置声明式编程式描述<router-link to="..."></router-link>【选项式API】：this.$router.push(...)【组合式API】： useRouter().push(...)会向 history栈（浏览器的路由栈）中添加一个新的记录，所以，当用户点击浏览器回退按钮时，会回到之前的 URL❗提示：编程式的 router.push(...) 的语法：其参

2024-03-11 20:41:03 984

原创 Vue3全家桶 - VueRouter - 【4】路径参数

/ NOTE 获取的跳转的路由对象。

2024-03-11 20:40:10 1167

原创 Vue3全家桶 - VueRouter - 【3】嵌套路由【children】

嵌套路由【children】如果在路由视图中展示的组件包含自己的路由占位符（路由出口），则此处会用到嵌套路由；如图所示：点击关于链接，则会展示About组件，在其组件中又包含了路由链接和路由占位符；路由嵌套规则：某一个路由规则中采用 children 来声明嵌套路由的规则；嵌套路由规则中的 path 不能以 / 开头，访问需要使用过 /fatherPath/sonPath 的形式；示例展示：路由模块 - router/index.js：import { createRouter,

2024-03-11 20:39:23 1059

原创 Vue3全家桶 - VueRouter - 【2】重定向路由

【代码】Vue3全家桶 - VueRouter - 【2】重定向路由。

2024-03-11 20:35:34 726

原创 Vue3全家桶 - VueRouter - 【1】快速使用（创建路由模块 + 规定路由模式 + 使用路由规则 + RouterView-RouterLink）

VueRouterVue-Router官网；vue-router 是 vue.js 官方给出的路由解决方案，能够轻松的管理 SPA 项目中组件的切换；安装：yarn add vue-router@4；快速使用1.1 创建路由模块在项目中的 src 文件夹中创建一个 router 文件夹，在其中创建 index.js 模块；采用 createRouter() 创建路由，并暴露出去；在 main.js 文件中初始化路由模块 app.use(router)示例代码：router/ind

2024-03-11 20:34:25 1103

原创 Vue3全家桶 - Pinia - 【1】（安装与使用 + Store + State + Getters + Actions）

Piniapinia 是 Vue 的专属状态管理库，它允许你跨组件或跨页面共享状态；一、安装与使用 pinia安装语法：yarn add pinianpm install pinia创建一个 pinia （根存储）并将其传递给应用程序：目标文件：main.js：import { createApp } from 'vue'import App from './App.vue'// 导入 createPinia 函数import { createPinia } from 'p

2024-03-11 20:33:31 900

原创 Vue3全家桶 - Vue3 - 【8】模板引用【ref】（访问模板引用 + v-for中的模板引用 + 组件上的ref）

refref。

2024-03-11 20:32:37 1149

原创 Vue3全家桶 - Vue3 - 【7】生命周期

钩子函数调用时机可以访问不能访问组件视图渲染之前数据源、函数、计算属性、侦听器、props等等组件中的DOM元素onMounted组件视图渲染之后数据源、函数、计算属性、侦听器、propsDOM元素等等数据发生变化，视图重新渲染之前数据源、函数、计算属性、侦听器、props、视图重新渲染之前的DOM元素等等视图重新渲染之后的DOM元素onUpdated数据源发生变化，视图重新渲染之后数据源、函数、计算属性、侦听器、props、视图重新渲染之后的DOM元素等等视图重新渲染之前的DOM元素。

2024-03-11 20:31:24 974 1

原创 Vue3全家桶 - Vue3 - 【6】组件（注册组件 + 组件通信 + 透传属性和事件 + 插槽 + 单文件CSS + 依赖注入）

组件一、注册组件1.1 ❌ 全局注册目标文件：main.js；语法：import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)// 全局注册app.component('组件名字', 需要注册组件)app.mount('#app')缺陷：全局注册，但并没有被使用的组件无法生产打包时被自动移除（也叫tree-shaking）。如果，你全局注册了一个组件，即使它并没有

2024-03-11 20:26:56 981

原创 Vue3全家桶 - Vue3 - 【5】计算属性

一、计算属性1.1 计算属性与方法的区别：两种方式在结果上确实是完全相同的，不同之处在于计算属性值会基于其响应式依赖被缓存；一个计算属性仅会在其响应式依赖更新时才重新计算，这意味着只要所依赖的数据源不改变，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数；方法调用总是会在重新渲染发生时再次执行函数；1.2 组合式API计算属性 - 语法：简易写法：（getter）：只是使用计算属性的值不对其进行修改；import { computed } fr

2024-03-11 20:25:54 1187

原创 Vue3全家桶 - Vue3 - 【4】侦听器

：需要侦听的数据源，可以是（包括计算属性）、一个响应式对象、一个getter函数(获取对象属性的函数)、或多个数据源组成的数组；🔺 注意：第一个参数如果是声明的，不需要添加，会自动读取；和选项式API的区别：选项式API此处是个字符串；组合式API此处是个变量 / 数组 / 函数（要侦听的数据源）；：回调函数；侦听单个数据源：第一个参数为新值；第二个参数为旧值；侦听多个数据源组成的数组：第一个参数数组是新值；第二个参数数组

2024-03-11 20:17:58 1103

原创 Vue3全家桶 - Vue3 - 【3】模板语法（指令+修饰符 + v-model语法糖）

/ NOTE 在使用 setup 语法糖的单文件里面导入组件的时候，无需注册，直接使用即可。// NOTE 接受父组件传递的数据 - 接收数据有两种形式（数组 + 对象）// （数组最前面）添加。// TODO 导入组件。

2024-03-11 20:16:36 1214

原创 Vue3全家桶 - Vue3 - 【2】声明响应式数据（ref + reactive + toRef + toRefs）

reactive().valuerefreactive// 引入 ref 函数，来声明响应式对象importfrom'vue'// 使用 ref 函数来声明原始类型的数据源，具备响应式letref'Abc'// 更改账号，控制台查看最新值function// 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值+='='log// 使用 ref 函数来声明对象类型的数据源：具备响应式letrefsalary7000name'Jack'// 更改员工薪资，控制台查看最新值。

2024-03-11 20:15:26 1069

原创 Vue3全家桶 - Vue3 - 【1】前置准备和介绍（VsCode插件 + 组合式API和选项式API的比较）

MVVM指的是ModelView和ViewModelModel：页面渲染用到的数据源；View：页面所渲染的DOM结构；ViewModel：表示Vue实例；当数据源发生变化时，会被 VM 监听到，VM会根据最新的数据源自动更新页面的结构；当表单元素的值发生变化时，也会被VM监听到，VM会把变化后最新的值自动同步到Model数据源中。

2024-03-11 20:11:31 1076