高高baby-CSDN博客

1、生态不如webpack，wepback牛逼之处在于loader和plugin非常丰富，但任何事情不是绝对的路还很远。3、还没有被大规模使用,很多问题或者诉求没有真正暴露出来，随着Vue3的快速普及，Vite应该很快会被大家首先考虑使用。因为weebpack在运行的时候，是要把项目整个打包，而vite其实就是只打包暂时必须打包的。2、prod环境的构建，目前用的Rollup，原因在于esbuild对于css和代码分割不是很友好。1、vite在运行的时候比webpack速度要快很多。Vite面临的问题。..

2022-07-17 15:52:37 1019

原创 git 误操作时，有时会误添加一些不想提交的文件，怎么解决？

git add或commit之后如何撤回3、push后如何撤回

2022-07-12 15:27:52 923

原创两个非代表什么意思？有什么用?

我们在开发中，有可能会遇到需要判断是否为null、是否为undufind和false，平时我们需要写好多判断语句，但有了!!之后，会方便很多。!!在遇到字符串以后会返回一个true，在遇到null、undefined和false的时候会返回一个false，所以我们可以用到很多地方，比如：判断是否已登录。function isAuth(){return !!getToken()//如果获取token有值，isAuth则会返回一个布尔值true，如果没有取到值，...

2022-04-11 15:47:21 236

原创 mock如何在终端开启

运行命令：npx json-server ./data.json --port 8888 --watch// npx json-server ./文件名.json --port 8888 --watch(--watch看情况加)设置成功后如下图然后就可以模拟发送请求了，可以设置根路径 http://localhost/8888 后正常发送请求即可...

2022-04-08 11:12:54 1075

原创 vue中eslint报Disallow self-closing on HTML void elements格式错误时的解决方案

当vue中eslint报Disallow self-closing on HTML void elements格式错误时

2022-03-29 23:59:36 3118 1

原创关于Vue3组合API

Vue3 组合API的入口？ setup() 如果明确知道数据是对象且知道字段名称，用什么函数什么响应式数据？ reactive() 如果不知道数据类和字段，使用什么声明响应式数据？ ref() 如果去解构 reactive 声明的数据对象，需要使用那个函数保持响应式特性？ toRefs() 组合API中定义计算属性？ Computed(()=>计算后的数据) 使用...

2022-03-29 16:44:47 1132

原创 vue动画

补充vue动画：在vue中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过transition实现动画。6个状态对应6个类名：进入（显示，创建） v-enter-from 进入前（vue2.0 v-enter） v-enter-active 进入中 v-enter-to 进入后离开（隐藏，移除） v-leave-from 进入前（vue2.0 v-leave） v-leave-active 进入中 v-leave-to 进入后多个transition使

2022-03-29 15:39:08 6519

原创 setup如果用了async

setup如果用了async，那么就需要配合Suspense一起使用，例：<template> <div> <img src="./assets/logo.png" alt="" /> <hr /> <Suspense>  <template #default> <User /> </te

2022-03-29 15:28:45 784

原创 vue2如何使用组合API

大致步骤：安装 @vue/composition-api 注册插件使用组合API yarn add @vue/composition-api或npm i@vue/composition-apimain.js中导入import VueCompositionAPI from '@vue/composition-api'Vue.use(VueCompositionAPI)<template> <div id="app"> &..

2022-03-28 21:49:02 978

原创 vue3和vue2的v-model

vue3组件支持v-model Vue2 v-model 语法糖原理：:value="数据" @input="数据=$event" Vue3 v-model 语法糖原理：:modelValue="数据" @update:modelValue="数据=$event" 父组件<CartTest v-model="count" /> components: { CartTest }, setup() { const count = r..

2022-03-26 23:25:25 1278

原创如何配置代理转发

1、在vue.config中，找到devServer在devServer中配置proxy，例： devServer: { port: port, open: true, proxy: { // /api 是程序员自定义的一个字符串(可以是任意的) // 代表是请求的基准路径，如果请求的基准路径是 /api，才会执行代理转发 // 这个 /api 是指设置的请求基准路径，所以需要将 VUE_APP_BASE_API 设置为 '/api'

2022-03-07 23:22:16 1196

原创 vue-cli 解决跨域配置说明

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。module.exports = { devServer: { // 代理配置 proxy: { // 这里的 api 表示如果我们的请求地址以 /dev_api 开头的时候，就出触发代理机制 '/dev_api': { target: 'www.baidu.com', // 需要代理的地址，就是后端服务器地址 changeOr...

2022-02-18 19:00:19 199

原创 ==比较的细节

==比较的细节复杂类型之间比较：比较的是地址基本数据类型之间比较：如果是同类型，直接比较值如果是不同类型，都是转成数值再比较特殊情况： undefined == null 会得到true NaN参与 == 运算永远是false 一个复杂类型和一个基本数据类型比较会先把复杂类型调用valueOf或者toString转成基本类型后，再按基本数据类型的规则进行比较 ...

2021-12-17 23:42:29 104

原创浅拷贝与深拷贝

浅拷贝与深拷贝这是指对象的拷贝操作浅拷贝：代表只拷贝1层深拷贝：代表不管有多少层都拷贝进来深拷贝必须利用递归完成代码如下 let p1 = { name: 'jack', age: 16, nums: [10, 20, 30], // 养宠物 pet: { nickname: '旺财' }, ..

2021-12-17 23:41:57 81

原创递归遍历dom树

递归遍历dom树● 递归用在一些树状结构非常方便，因为树状要遍历就需要一级一级往下，再一级一级回来● 代码如下： function getChild(ele) { for (let i = 0; i < ele.children.length; i++) { console.log(ele.children[i]) // 找当前这个元素的子元素

2021-12-17 23:40:32 239

原创 ES6的一些知识点

ES6 - 类与对象什么是类？好比：人类、动物类就是一个群体的统称类里描述这一类群体，有哪些特征和行为，所谓的特征对应到代码中就是属性，行为对应到代码中就是方法类理解为是一套描述数据的模板，但是没有具体的数据在ES6以前JS里是没有类专门的语法，都是通过构造函数起到类的作用什么是对象？某一个群体里的实际例子对象可以理解为是根据模板创造出来的具体的数据所以我们经常把创建对象叫做实例化对象 ES6里声明一个类的语法cla

2021-12-17 23:38:49 84

原创使用call和原型链实现完整继承

使用call和原型链实现完整继承● 要创建中国人、美国人，他们都有共同的属性和方法○共同的属性：有名字、有年龄○共同的方法：有吃饭、跑步等行为● 所以可以抽取一个父对象，包含名字、年龄、吃饭、跑步的行为，让他们继承即可● 代码如下： // 人类 function Person(name, age) { // 只有当name有值并且age也有值时才加 if (name && age) { ..

2021-12-17 23:34:48 653

原创扩展运算符

扩展运算符符号：...数据可以将对象、数组、字符串里的成员一一铺开例： let arr = [10, 20, 30, 40] console.log(...arr) let str = 'hello' console.log(...str) let p1 = { name: 'jack', age: 16

2021-12-15 12:20:09 627

原创修改this指向的方法

总结this的指向函数直接调用，this就是window 函数如果被对象调用，谁调用，this就是谁函数绑定到事件里，被事件触发调用，this就是绑定这个事件的元素函数被new调用，那么函数里的this就是new创建出来的对象函数被定时器调用，那么this就是window 如果是箭头函数，当前this是什么，箭头函数里的this就是什么修改this指向之 call语法函数.call(要修改的this指向, 实参列表) 其实以前该怎么给函数传参，现在依然怎么传，只不

2021-12-15 12:18:56 1123

原创 JS的严格模式

严格模式●严格模式，就可以让JS的语句更加严谨●如何开启严格模式？○就是在script开头，写一句 "use strict"●严格模式特点：○变量必须先声明才能使用○以及函数调用里的this更加明确 "use strict" // 如果变量不声明直接赋值，它就是全局变量 // a = 10 // 报错 // console.log(a) function foo () {

2021-12-15 12:15:27 563

原创 instanceof

instanceof● 作用：用来判断是不是某种复杂类型，如果是得到true，如果不是得到false● 为什么不用typeof？○因为typeof只对基本数据类型比较精准，复杂类型不行● 原理：判断某个对象在不在构造函数的原型对象的原型链上，在得到true，不在得到false // instanceof 可以理解为用来检测复杂数据类型是哪个 // typoef只有在检测基本数据类型时才准确，复杂类型不精细 // console.log(typeof 10...

2021-12-15 10:23:23 467

原创给数组扩展方法

给数组扩展方法如何给数组扩展方法例如：数组有没有一个求最大值的方法？没有需求：给数组加一个 max 方法，可以求出数组里的最大数，并且要让每个数组都有这个方法解决办法给数组的原型对象加方法，那样就可以让所有数组拥有这个方法但是方法里操作的数据不能写死，而应该谁调用就用谁的数据，所以也就是说要用 this 代码如下 // 找出数组里的最大值，怎么找？ // 应该谁调用，就取出谁的第一个元素，然后再跟后面的元素进行比较

2021-12-15 10:21:31 225

原创原型对象三角关系面向对象的三大特征继承原型链

原型对象每当使用 function 声明一个函数，就有一个与之对应的原型对象原型对象也是对象，所以里面也可以动态的加属性和方法给原型对象加的方法，那么所有通过这个构造函数实例化出来的对象都可以访问到 constructor每个原型对象默认都有一个属性叫 constructor，它指向了自己对应的构造函数每个原型对象都应该有这个属性！并且要指向正确的自己的构造函数__proto__每个对象都有 __proto__ 的属性，这个属

2021-12-13 18:29:15 512 1

原创开辟空间的细节构造函数里内存浪费的问题

开辟空间的细节什么时候会开辟堆空间的总结有 new 就会开新的堆空间遇到 function 声明函数也会开辟一个新空间遇到 {} 或者 [] 也会开辟一个新的堆空间 {} 相当于 new Object [] 相当于是 new Array 目的：复杂数据类型之间比较，比较的是地址构造函数里内存浪费的问题构造函数里如果写了方法，那意味着每次调用构造函数，都会一个新的空间放这个方法那意味着如果创建10个对象，就浪费了10个空间，例

2021-12-13 18:27:26 399

原创字符串的方法

字符串的方法trim：去除两边空格 substr 截取字符串参数1：从哪个下标开始截参数2：截取几个长度 substring 截取字符串参数1：从哪个下标开始截参数2：截取到下标几，不包括结束下标不管是substr还是substring，都可以只传一个参数，代表从某个下标开始，截取到最后 split 把字符串按某个符号切割成数组如果不传任何东西代表把字符串整体作为一个数组元素如果传空字符串，代表把字符串的每个字都作为一

2021-12-13 18:24:57 136

原创数组的方法

数组的方法concat 拼接两个数组，产生一个新数组 join 把数组中每个元素通过一个字符连接起来，产生一个字符串 reverse 反转数组，会改变原数组 indexOf 查找元素在数组里的下标，从左往右找，找到第一个如果找到得到下标，没找到得到-1 妙用：可以用来判断数组里是否拥有某个元素，如果不等于-1代表拥有，等于-1代表不拥有 sort 排序，默认调用是先比较第一位，再比较第二位，以此类推如果希望从小到大按值排序，传入回调函数

2021-12-13 13:32:44 263

原创数组方法、包装类型、原型链、继承

数组方法、包装类型、原型链、继承箭头函数写法 (形参) => { 函数体} 箭头函数没有声明，只有作为表达式使用（赋值、回调函数、自执行函数）简写如果参数只有一个时可以简写小括号如果函数体里只有一句代码，也可以简写大括号，并且简写大括号后，这句代码的执行结果就是返回值特点它内部没有arguments，也没有对this重新初始化所以它的this保留的是当前环境里的 this 解构语法

2021-12-13 10:32:54 53

原创对象结构介绍

对象解构● 快速取出对象的属性值存到变量里● 语法JavaScript复制代码let {属性名} = 对象例： let obj = { name: 'jack', age: 16, height: 175, say: function () { console.log('大家好') } } .

2021-12-12 22:32:58 276

原创解构赋值、数组解构

解构赋值方便我们快速取出数组、对象里的值存到某个变量里数组解构语法：按顺序取let [ 变量列表 ] = 数组变量之间用逗号隔开语法：可以比之前的多let [变量*5] = 数组 // 但是这个数组只有三个后面两个变量是undefined，前面三个变量分别保存了数组的三个元素语法：可以比之前的少，就是按顺序取let [变量*2] = 数组 // 数组假设长度为5 分别取到了下标0和下标1 语法：只取2个，剩余都放到一个新数组里le

2021-12-12 22:31:12 683

空空如也

空空如也