前端笔记
Zang_WS
以彼之长 补己之短
展开
-
vue 3.0 pinia的使用
1.npm install pinia2.定义一个store通过 defineStore 来定义 store,它需要一个唯一的名称,作为第一个参数传入:3.页面中引入使用原创 2022-07-06 16:57:46 · 810 阅读 · 0 评论 -
原生js的面试题
1.JS的基本数据类型?引用数据类型?基本数据类型(值类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、symbol。引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function)。特殊的对象:正则(RegExp)和日期(Date)。特殊类型:Infinate 无穷、NAN 非数字。2.es6新特性1.变量声明:const和letlet表示声明变量,而const表示声明常量,两者都为块级作用域区别:原创 2022-06-20 19:21:04 · 4468 阅读 · 0 评论 -
vue3.0面试题整理
1.Vue3 比 vue2 优势2.Vue3 升级了哪些重要的功能?3.Vue3 生命周期4.如何看待composition API 和options API5.如何理解ref toRef和toRefs?6.ref toRef toRefs进阶,深入理解7.Composition API如何实现代码逻辑复用?8.Reflect作用9.watch和watchEffect的区别是什么?10.setup中如何获取组件实例?11.Vite是什么?12.Composition API和React原创 2022-06-15 21:34:52 · 9036 阅读 · 0 评论 -
vue2.0面试题整理
1.vue中MVVM的理解M:模型(Model):数据模型;负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。V:View 视图: 负责页面展示,也就是用户界面。主要由 HTML 和 CSS 来构建VM:视图模型(View-Model): 负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示通过vue类创建的对象叫Vue实例化对象,这个对象就是MVVM模式中的VM层,模型通过它可以将数据绑定到页面上,视图可以通过它将数据映射到模型上优点1.低耦合。视图(原创 2022-06-15 21:20:35 · 6893 阅读 · 1 评论 -
移动端声明及meta标签设置
1. 移动端声明及meta标签设置设置当前html文件的字符编码设置浏览器的兼容模式(让IE使用最新的浏览器渲染)视口(快捷键:meta:vp)作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备那么大展示;视口的宽度可以通过meta标签设置;此属性为移动端页面视口设置;width:视口的宽度,width=device-width:宽度是设备的宽度initial-scale:初始化缩放,- initial-scale=1.0:不缩放user原创 2022-06-15 20:32:22 · 1294 阅读 · 0 评论 -
js的数据类型
1、数据类型:基本数据类型(值类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、symbol。引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function)。特殊的对象:正则(RegExp)和日期(Date)。特殊类型:Infinate 无穷、NAN 非数字修改:基本数据类型的值直接在栈内存中存储,值与值之间独立存在,修改一个变量不会影响到其他变量。对象是保存在堆内存中的,每创建一个新对象,就会在堆内原创 2022-06-15 16:44:13 · 82 阅读 · 0 评论 -
js的六种继承方式
1、原型链继承核心: 将父类的实例作为子类的原型特点:1.非常纯粹的继承关系,实例是子类的实例,也是父类的实例2.父类新增原型方法/原型属性,子类都能访问到3.简单,易于实现缺点:1.要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,不能放到构造器中2.无法实现多继承3.来自原型对象的所有属性被所有实例共享(来自原型对象的引用属性是所有实例共享的)4.创建子类实例时,无法向父类构造函数传参2、构造函数继承(借助 call)核心:使用父类的构造函数来增强子类实例原创 2022-06-15 16:31:36 · 7365 阅读 · 0 评论 -
js中this的指向
1.单独使用 this,它指向全局(Global)对象。2.在对象方法中, this 指向调用它所在方法的对象。3.函数使用中,this 指向函数的所属者。4.严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。5.在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素。6.apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。扩展:call&apply&bind的区别原创 2022-06-15 15:04:09 · 281 阅读 · 0 评论 -
keep-alive缓存 echart表图重绘问题
钩子函数执行顺序:keep-alive生效之后 页面组件下需要回显如echart,table之类的表图数据是不能再当前组件下使用v-if来判断显示的DOM节点, 如下:在当前页面请求数据传递给子组件显示数据时当子组件发生销毁-创建的操作 数据虽然缓存 但页面表图不会发生重绘(也可以调用表图重绘功能)改正:在父组件调用接口进行数据整合 在中间层子组件进行条件判断( 相当于各自的私有作用域)这样表图不需要重绘...原创 2022-06-15 14:41:34 · 551 阅读 · 0 评论 -
vue3使用mockjs本地调试
vue3 本调试 mock.js原创 2022-06-14 15:17:40 · 377 阅读 · 0 评论 -
vue3.0 vite + typeScript + axios + element-plus + eslint项目搭建
1.项目初始化npm init vite demo-b选择vue + vue-ts2. eslint 初始化npx eslint --init第一步? How would you like to use ESLint? ... // eslint检查方式 To check syntax only // 只检查语法> To check syntax and find problems // 检查语法并查找问题 To check syntax, find problem原创 2021-08-27 11:12:44 · 754 阅读 · 0 评论 -
JavaScript中 数组 push concat push.apply的区别及使用
1.push 添加到数组的末尾 改变原数组let temparr = [1,2,3,4];temparr.push(5, 6)console.log(temparr) //[ 1, 2, 3, 4, 5, 6 ] temparr.push([6,7])console.log(temparr)//[ 1, 2, 3, 4, [ 6, 7 ] ]他会把追加的数组作为元素的某一项添加到末尾2.cancat 不改变原数组。concat合并数组之后,返回值才是新数组,并且可以合并两个及其以上的数组原创 2021-08-24 11:21:46 · 491 阅读 · 0 评论 -
页面滚动条缓慢滚动到指定位置
window.scrollTo({ top: document.body.scrollTop, behavior: "smooth"})原创 2021-08-04 18:38:25 · 654 阅读 · 0 评论 -
vue 组件中元素距离页面顶部高度与当前组件距离页面顶部高度
元素距离顶部高度<div ref="demo"></div>this.$refs.demo.getBoundingClientRect().top组件距离页面顶部高度<component ref="demo"></component >this.$refs.demo.$el.offsetTop原创 2021-08-04 13:23:56 · 1248 阅读 · 0 评论 -
项目初始化报 404 Not Found - GET https://registry.npmjs.org
npm install报 404 Not Found - GET https://registry.npmjs.org解决办法:1.先查看当前的代理设置npm config get proxy2.如果代理设置时null,则需要配置新的代理地址npm config set registry 新的地址根据情况 是公司项目的地址还是默认的国内cnpm淘宝镜像(https://registry.cnpmjs.org/)...原创 2021-07-28 13:16:00 · 10244 阅读 · 0 评论 -
vue项目初始化_python错误
MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装 .NET Framework 2.0 SDK;2) 安装 Microsoft Visual Studio 2005;或 3) 如果将该组件安装到了其他位置,请将其位置添加到系统路径中。 [D:\manage\web\node_modules\utf-8-validate\build\binding.sln]错误原因:缺少windows构建插件解决方法:主要是以管原创 2021-07-28 13:07:56 · 510 阅读 · 0 评论 -
前端常见css样式调整
1. 侧边滑动条自定义容器::-webkit-scrollbar {width: 6px; //滚动条的宽度}容器::-webkit-scrollbar-thumb {background-color: #8899A7; //滚动条的颜色border-radius: 3px;//滚动条的边框倒角}2. input框 placeholder样式设置::-webkit-input-placeholder{} /使用webkit内核的浏览器/:-moz-placeholder{} /Firefo原创 2021-06-18 10:50:09 · 383 阅读 · 0 评论 -
Math常用方法
Math.abs(x) //返回数x的绝对值Math.abs(1) // 1Math.abs(0) // 0Math.abs(-1) // 1Math.ceil(x) // 对数x进行上舍入(返回大于x的最小整数)Math.ceil(1.2) // 2Math.ceil(0.3) // 1Math.ceil(-1.2) // -1Math.floor(x) // 对数x进行下舍入(返回小于x的最大整数)Math.floor(1.8) // 1Math.floor(原创 2021-06-17 18:22:37 · 182 阅读 · 0 评论 -
数组快速填充相同参数
方法一:let arr3 = []arr3.push(1 * 4)arr1 // [1, 1, 1, 1]方法二:Array.fill数组填充Array.fill(value, start, end)对于primitives,请使用.fill:let arr1 = Array(5) // 生成数组长度为 5 的空数组 [empty × 5]arr1.fill(1) // 填充数组每一项arr1 // [1, 1, 1, 1, 1]arr1 .fill(7, 2, 4)arr1原创 2021-06-17 17:29:52 · 934 阅读 · 0 评论 -
undefined与null相似与区别
一、相似性与设计之初在JavaScript中,将一个变量赋值为undefined或null。var a = undefined;var a = null;上面代码中,a变量分别被赋值为undefined和null,这两种写法几乎等价。if (!undefined) console.log('undefined is false');// undefined is falseif (!null) console.log('null is false');// null原创 2021-06-16 10:30:53 · 174 阅读 · 0 评论 -
前端编辑器常用插件 VSCode版(Vue)
vue 3.0 进阶技巧es6 打印es6 打印开关 .eslintrc.js 文件中 在module.exports = { rules: { ‘no-console’: ‘off’, ‘no-debugger’: ‘off’ }}环境配置新建环境配置文件 文件名对应环境名称 格式 .env.xxx配置文件为打包文件时(固定): NODE_ENV = ‘production’ (NODE_ENV为webpack打包判断依据 只有为production时才执行原创 2021-06-15 20:08:22 · 721 阅读 · 0 评论