Flex 弹性布局 Flex的概念 Flex是 Flexible Box 的缩写，就是弹性盒子布局的意思 弹性盒子是一种用于按行或按列布局元素的一维布局方法; 元素可以膨胀以填充额外的空间, 也可收缩以适应更小的空间; 使用Flexbox来进行布局的方案称之为Flex布局(flex layout) 两对象 | 两轴 | 两线 两对象：flex container(容器)和flex item(项目) flex container(容器) 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container flex： flex container 以 block-level 形式存在 inline-flex： flex container 以 inline-level 形式存在 flex item(项目) 当flex container中的子元素变成了flex item时, 具备一下特点: flex item的布局将受flex container属性的设置来进行控制和布局; flex item不再严格区分块级元素 ...

TypeScript快速入门 TypeScript 是一种由微软开发的自由和开源的编程语言。 它是 JavaScript 的一个超集，本质是向这个语言添加可选的静态类型和基于类的面向对象编程。 使用TypeScript 编译器 安装TypeScript 1npm install -g typescript 编译 TypeScript 文件 1234tsc hello.ts# hello.ts => hello.jsnode hello.js 对于刚入门 TypeScript 的小伙伴，也可以不用安装 typescript 直接使用线上的 TypeScript Playground 来学习新的语法或新特性。 编译完成后，目录中会出现hello.js，其中内容与ts中的一模一样，然后node hello.js就会进行输出。 细心的同学，可能会发现。当函数名或者是变量名相同的时候，会提示重复定义的问题，此时就应该优化编译方法 优化编译 解决TS和JS变量冲突问题，会生成tsconfig.json配置文件 1tsc --init #生成配置文件 自动编译，生成dist文件 ...

Pinia快速入门 Pinia简介 官方网站 Pinia是Vue生态里Vuex的代替者，一个全新Vue的状态管理库。 优点 Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3的小伙伴都能很快上手 和 Vuex 对比，取消了Mutations操作，只有 state getters actions 简化状态库管理 完全支持 TypeScript 无需再创建各个模块嵌套了，Vuex中如果数据过多，通常分模块来进行管理，稍显麻烦，而pinia中每个store都是独立的，互相不影响 体积非常小，只有1KB左右。 pinia支持插件来扩展自身功能。 支持服务端渲染 Pinia基础使用 安装Pinia 1npm install pinia 安装完成后我们需要将pinia挂载到Vue应用中，也就是我们需要创建一个根存储传递给应用程序，简单来说就是创建一个存储数据的数据桶，放到应用程序中去。 修改main.js，引入pinia提供的createPinia方法，创建根存储。 12345678910111213// main.tsimport { createApp } ...

退出登录功能 1.在index.vue中定义一个<el-button>按钮，并且绑定一个点击事件@click="handlelogout"事件，、 2.然后在下方定义一个handlelogout()函数 12345function handlelogout () { showModel("是否要退出登录？").then(res => { console.log("退出登录"); })} 3.在util.js中封装一个提示框方法 12345678910111213import { ElMessageBox } from 'element-plus'export function showModel (content = "提示内容", type = "warning", title = ""){ return ElMessageBox.confir ...

统计面板组件开发 骨架屏优化体验 使用element-plus中的骨架屏组件 数字滚动动画实现 1npm i gsap 为了方便使用，封装至/components/CountTo.vue 1234567891011121314151617181920212223242526272829<template> {{ d.num }}</template><script setup>import { reactive } from "vue"import gsap from "gsap"const props = defineProps({ // 父亲组件传过来的值 value: { // 希望滚动到的终点 type: Number, default:0 }})const d = reactive({ num: 0})function An ...

JS 检测数据类型的 4 种方式 typeof instanceof constructor Object.prototype.toString.call() 混淆点 typeof 123typeof null; //'object'typeof function () {}; //'function'typeof Symbol(); //'symbol' typeof 的返回值类型为字符串类型 typeof 判断基本数据类型时，除了 null 的输出结果为’object’ 其它类型都能正确判断 typeof 判断引用数据类型时，除了判断函数会输出’function’ 其它都输出’object’ 注意点： null 的数据类型是 object （null 是对一个空对象的引用，是一个占位符） typeof 并不能区分引用数据类型（Array 数组、Date 时间）等 所以我们可以使用 instanceof 来判断引用数据类型 symbol()的注意点： 1234567891011121314 ...

事件循环机制 javascript是一门单线程语言。 Javascript事件循环 导图要表达的内容用文字来表述的话： 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。 当指定的事情完成时，Event Table会将这个函数移入Event Queue（任务队列）。 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。 上述过程会不断重复，也就是常说的Event Loop(事件循环)。 那怎么知道主线程执行栈为空呢？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。 说了这么多文字，不如直接一段代码更直白： 123456789let data = [];$.ajax({ url:www.javascript.com, data:data, success:() => { console.log( ...

数据驱动视图 MVVM模型 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。 M：模型Model，data中的数据 V：视图View，模板代码 VM：视图模型ViewModel，Vue实例 观察发现 data中所有的属性，最后都出现在了vm身上 vm身上所有的属性及Vue原型身上所有的属性，在Vue模板中都可以直接使用 本质：事件 + 方法 + 改变数据 = ViewModel 1<p @click="changeName">& ...

防抖和节流 防抖（deounce） 定义 防抖指只有在n秒内没有再次触发某个函数时，才会真正执行这个函数；若n秒内再次触发此函数，则重新计算时间。 应用场景 输入框中频繁的输入内容，搜索或者提交信息； 频繁的点击按钮，触发某个事件； 监听浏览器滚动事件完成操作； 用户缩放浏览器的resize事件(浏览器窗口大小发生变化时触发) 代码实现 1234567891011function debounce(func, wait) { let timeout; return function () { let context = this; // 保存this指向 let args = arguments; // 拿到event对象 clearTimeout(timeout) // 清除定时器 timeout = setTimeout(function(){ func.apply(context, args) }, wait); }& ...

面试官灵魂三连问 你用过webpack么，它的原理是什么？ 你还知道些构建工具，各有什么优缺点？ 你在项目中有配置过么，在哪些场景配置过？ Webpack介绍 什么是webpack webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)。 webpack原理是什么 工作原理 webpack可以看做是模块打包机： 它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 在3.0出现后，Webpack还肩负起了优化项目的责任。 打包原理 把一切都视为模块：不管是 css、JS、Image 还是 html 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。 按需加载：打包过程中 Webpack 通过 Code Splitting ...