![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端学习笔记
文章平均质量分 75
按照从0到1的学习记录的笔记
这里是慕戈
这个作者很懒,什么都没留下…
展开
-
ant design vue解决报错:You can use getFieldDecorator(id, options) instead v-decorator=“[id, options]“
报错:Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]" to register it before render.原创 2023-01-09 17:26:45 · 1292 阅读 · 0 评论 -
后台返回base64编码的图片如何在前端展示?
直接改这里src=“data:image/gif;base64,图片数据”,将获取到的数据加在后面就好了,收到的数据也不需要解码。原创 2023-01-06 15:59:49 · 1722 阅读 · 0 评论 -
浅学axios --大二下第九周
目录axios网络模块axios请求方式axios并发请求全局配置常见的配置选项对axios进行简单封装如何使用axios的拦截器axios功能特点:在浏览器中发送XMLHttpRequests请求在node.js中发送http请求支持Promise API拦截请求和响应转换请求和响应数据等等网络模块Vue中发送网络请求有非常多的方式传统的Ajax是基于XMLHttpRequest(XHR)不使用的原因:配置和调用方式等都非常混乱,编码不够优美,所以真实开发中很少使用,而是使用原创 2022-04-26 22:12:07 · 411 阅读 · 0 评论 -
浅学Vuex -- 大二下
这里写目录标题Vuex基本操作vuex中的属性含义Vuex官方:用集中式存储管理应用的所有组件的状态,并用相应的规则保证状态以一种可预测的方式发生变化。人话:用一个对象来响应式的管理多个组件的共同数据Vuex就是提供了这样的一个在多个组件间共享状态的插件基本操作先下载vuex插件创建store文件夹,在这个文件夹的目录下面的index.js中,先引入vuex,然后安装vuex插件,再创建Vuex对象,完善对象中的内容,最后导出store对象在main.js中引入store在一个项目里原创 2022-04-23 22:25:08 · 1480 阅读 · 0 评论 -
浅学vue-router -- 大二下
目录vue-router基本使用配置路由的默认路径关于router-link的属性动态路由路由的懒加载三种写法嵌套路由参数传递导航守卫keep-alive箭头函数中的this就是找最近的作用域中的thisvue-router就是通过互联的网络把信息从源地址传到目的地址的活动,vue-router用于设定访问路径,将路径和组件映射起来vue-rounter就是用于单页面富应用,用来管理不同组件在页面中的显示情况改变url但页面不刷新,有以下的方法可以实现:通过直接赋值location.hash来原创 2022-04-14 18:45:46 · 946 阅读 · 0 评论 -
Vue CLI -- 隔离后的学习2
目录Vue CLIVue CLI2runtime+compiler 和 runtime-only 的区别Vue CLI3Vue CLI命令行界面,俗称脚手架可以快速搭建Vue开发环境及对应的webpack的配置安装的时候需要npm 和 nodevue --version检查脚手架的版本npm install -g @vue/cli-init 拉取脚手架2x版本2的初始化项目 vue init webpack my-project3的初始化项目 vue create my-projectVu原创 2022-01-12 00:20:42 · 231 阅读 · 0 评论 -
webpack的后续 -- 隔离后的学习即2022第一次学习
目录webpack中的loaderless文件图片文件es6语法处理引入vue.jsel 和 template的关系plugin压缩jswebpack中的loaderless文件使用less文件的操作方法和使用css文化的差不多,只是要安装不同的loader,安装不同的loader只需要在webpack官网里面找到相应的loader和配置图片文件可以使用url-loader这个loader来打包文件但是这个在webpack.config.js文件中的配置有一个选项,就是下面那个,他表示图片最大不原创 2022-01-10 00:20:38 · 474 阅读 · 0 评论 -
关于VUE报错: You are using the runtime-only build of Vue where the template compiler is not available. E
vue是开发两种版本的,分别是runtime-only 代码中不可以有任何的templateruntime-compiler 有compiler可以编译template在一般情况下,将id为app的挂载在div里面,那个div其实就是相当于那个vue的template。至于如何解决这个问题,需要在webpack.config.js文件中exports加上下面的代码;resolve:{ alias:{//别名的意思 'vue$':"vue/dist/vue.esm.js"//因为这个原创 2022-01-08 17:19:20 · 410 阅读 · 0 评论 -
父子组件具体访问 + 插槽slot + 模块化开发webpack -- 大二上第十五周
目录父子组件的相互通信实例父子组件的访问方式插槽slot具名插槽作用域插槽模块化开发webpackwebpack.config.js 和 package.jsoncss文件的配置 -- loader父子组件的相互通信实例子组件不能改变父组件内部的值如果想要改变从父组件传入子组件的数值,可以通过data重新定义变量或者使用计算属性<div id="app"> <cpn :number1="num1" :number2="num2" @num1change="num1chang原创 2021-12-12 21:20:21 · 581 阅读 · 0 评论 -
遇到报错: Module build failed: TypeError: this.getOptions is not a function
在用webpack下载loader打包css文件的时候遇到的错误,主要原因就是不兼容只需要改变一下style-loader和css-loader的版本就好了npm install -save -dev style-loader@0.23.1npm install -save -dev css-loader@2.0.2原创 2021-12-12 21:17:26 · 973 阅读 · 0 评论 -
vue之v-show, v-for,v-model, 组件化 -- 大二上十三周十四周
目录vuev-showv-for组件keyv-modelinput:radioinput:checkboxselect值绑定修饰符组件化全局组件和局部组件父组件和子组件分离组件模板组件内部的data父子组件通信父传子子传父vue在vue中,他会使用虚拟dom来调用内部,当时v-if v-else的时候,他会复用一些已有的信息,如果不想被复用的话,可以给加上key值,只要两个的key值不一样,就不会复用v-show和v-if查不多,区别就是当判断条件是false的时候,v-if会直接删掉那个元素,而v原创 2021-12-05 20:14:11 · 1239 阅读 · 0 评论 -
vue的基本操作 -- 大二上第十一周十二周
目录vuevue基本操作插值操作(就是把data里面的文本数据插入到html中)静态插入动态插入(v-bind)v-bind 动态绑定classv-bind 动态绑定style计算属性事件监听(v-on)v-on的修饰符条件判断vue创建vue实例的时候,传入一个对象optionsel:string/htmlelement 作用:决定之后vue实例会管理哪个DOMdata:object/function 作用:vue实例对应的数据对象(组件里面必须是函数)methods:{[key:strin原创 2021-11-21 19:30:15 · 742 阅读 · 0 评论 -
初探vue --大二下第十周
目录vuevue的MVVM小结vuevue是一个渐进式的框架,渐进式意味着可以把vue作为应用的一部分嵌入其中,然后带来更丰富的交互体验有很多特点和web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟dom<div id="app">{{message}}</div><script src="vue.js"></script><script> // 声明式编程,之前的依赖于原生js的编程范式称之原创 2021-11-07 19:45:50 · 107 阅读 · 0 评论 -
MySQL -- 大二上第四周
目录MySQL的基本使用SQL在项目中操作MySQLMySQL的基本使用varchar括号里面表示字符串最长的长度default/expression表示默认值SQLSQL:结构化查询语言,专门用来访问和处理数据库的编程语言,可以让我们以编程的形式操作数据库里面的数据,只能在关系型数据库中使用,非关系型数据库不支持SQL语言(如MongoDB)主要学一下基本操作,增删改查,where条件,and / or运算符, order by排序, count(*)函数SELECT语句用于从表中查询原创 2021-09-26 22:59:20 · 428 阅读 · 1 评论 -
栈 + 队列(简单版,用js的数组实现)+ 优先级队列 -- 大二上第四周
目录数据结构栈队列数据结构线性表可以用数组和链表来实现目前的栈和队列的封装都是基于数组(因为js里面对于数组的函数有很多,在开始会比较容易)栈function Stack() { this.items = []; Stack.prototype.push = function (element) { this.items.push(element); } Stack.prototype.pop = function () { r原创 2021-09-26 22:56:29 · 118 阅读 · 0 评论 -
axios + MySQL初始 + 懒加载(demo含代码) -- 大二上第三周
目录axiosMySQL懒加载axiosaxios用于浏览器和node.js的基于Promise的HTTP客户端,是同构的(可以在具有相同代码库的浏览器和node.js中运行)。在服务器端使用本地node.js的http模块,在客户端(浏览器)使用XMLHttpRequests执行get请求const axios = require('axios');axios.get('/user?ID=12345') .then(function (resquest) { con原创 2021-09-21 20:53:50 · 248 阅读 · 0 评论 -
本地存储 -- 大二上第二周
目录cookieLocalStorage, sessionStorageStorage事件一周小结cookiecookie是直接存储在浏览器中的一小串数据,是HTTP协议中的一部分最常见的用处之一就是身份验证(有时间可以做一个demo)document.cookie可以访问,如果要写入,这个不是数据属性,是访问器(getter/setter),对他的赋值会被特殊处理,就是只会更新提到的cookie,而不会涉及其他cookie这样将页面刷新或者重新打开数据都还在理论上讲cookie的名称和值可以原创 2021-09-12 15:50:34 · 159 阅读 · 1 评论 -
getting/setting + 继承的六种方法 + 考核总结 -- 大二上第一周
目录JS复习属性标志对象的访问器属性继承的六种方法1.构造函数式继承2.原型链式继承3.组合继承(原型链 + 构造函数)(不建议)4.原型式继承5.寄生式继承6.寄生组合式继承(最常用)考核总结JS复习属性标志属性值默认为true,一般情况下下面三个是不会出现的Object.defineProperties方法可以用来一次定义多个属性Object.getOwnPropertyDescriptors方法是一次获得所有的属性描述符对象的访问器属性对象有两种属性,一种是数据属性,另一种是访问器属性原创 2021-09-05 21:43:19 · 270 阅读 · 0 评论 -
Node.js的后续 + 一个关于正则表达式的demo -- 暑假Day15
demo1需求:这个模式用户输入只能输入英文字母,数字,下划线和短横线长度在6-16之间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-原创 2021-07-30 21:58:13 · 105 阅读 · 1 评论 -
Node.js补充(事件循环 + EventEmitter + Buffer + stream + 全局对象 + util) -- 暑假Day14
目录Node.js补充事件循环EventEmitter 类Buffer(缓冲区)stream(流)全局对象utilNode.js补充Node.js的组成NPM,是和Node.js一起安装的包管理工具REPL,交互式解释器,就相当于在窗口中直接进行编辑,感觉没什么用回调函数,异步编程的直接体现就是回调函数阻塞代码:按顺序执行的代码非阻塞代码:不按顺序,可以在加载外部文件之前执行后续显示代码事件循环Node.js 是单线程应用程序,里面的几乎每个API都支持回调函数基本上所有的事原创 2021-07-28 22:09:09 · 136 阅读 · 1 评论 -
promise的一些补充 + git的基础命令 -- 暑假Day13
目录Promise 的一些补充git的基本操作GitHub中远程仓库的两种访问方式Promise 的一些补充finally方法;相当于中转站,当promise的状态发生改变之后就会执行,他的存在不影响then和catch,他会将promise的结果传递下去git的基本操作git init命令就是相当于建立本地仓库git status命令检查文件处于什么状态-s精简查看两个红色问号是表示未跟踪状态绿色的A表示新添加到暂存区的文件红色的M表示文件被修改过,暂时没有放入暂存区绿色的M原创 2021-07-28 10:44:41 · 85 阅读 · 0 评论 -
静态资源和动态资源 + 路由 + 同步/异步API + defer和async --暑假Day12
目录静态资源和动态资源路由同步API,异步APIdefer 和 async静态资源和动态资源静态资源:服务器端不需要处理,可以直接响应给客户端的资源就是静态资源,例如css,js,html文件动态资源:相同的请求地址不同的响应资源静态文件访问的代码const http = require('http');const url = require('url');const path = require('path');const fs = require('fs');const mime =原创 2021-07-26 22:25:09 · 177 阅读 · 0 评论 -
gulp + 服务器 --暑假Day11
目录第三方模块Gulppackage.jsonNode.js中模块加载机制Node.jsNode.js全局对象global服务器url创建web服务器HTTP协议请求报文响应报文第三方模块Gulp基于node平台开发的前端构建工具机器代替手工,提高开发效率可以进行语法转换,项目上线时的文件压缩合并,公共文件抽离,修改文件浏览器会自动刷新gulp.src():获取任务要处理的文件gulp.dest():输出文件gulp.task():建立gulp任务第一个参数是任务的名称,第二个参数是任务的原创 2021-07-24 12:20:53 · 86 阅读 · 0 评论 -
async和await + 宏队列和微队列 + Node开发 -- 暑假Day10
目录async和awaitasyncawait宏队列和微队列Node开发Node.js中模块化开发规范系统模块系统模块fs文件操作系统模块path路径操作第三方模块async和awaitasync函数的返回值是promise对象promise对象的结果是由async函数的返回值决定的,和then的差不多await右侧表达式一般为promise对象,但也可以是其他值如果表达式是promise对象,await返回的结果 必须是promise成功的值,不是promise,返回值本身await必须写原创 2021-07-22 22:19:19 · 268 阅读 · 8 评论 -
Promise的关键问题 + 手写Promise -- 暑假Day9
Promise的几个关键问题如何改变promise的状态?调用resolve就是成功,调用reject就是失败,还有一个抛出异常,然后当前是pending就会改变为rejectedconst p = new Promise((resolve, reject) => { throw new Error('出错了');})console.log(p);[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sf53oMMA-1626920223490)(4.原创 2021-07-22 10:19:38 · 71 阅读 · 0 评论 -
回调函数 + ERROR + promise --暑假Day8
目录关于error错误类型错误处理错误对象promise状态基本使用promise的APIPromise的语法关于error错误类型Error: 所有错误的父类型EvalError:eval()的定义和使用不一致RangeError:数值越界也有可能会是死循环ReferenceError:非法或不能识别引用数值SyntaxError:发生语法解析错误TypeError:操作数类型错误URIError:URI处理函数使用不当错误处理捕获错误:try原创 2021-07-20 22:26:02 · 163 阅读 · 0 评论 -
解构赋值 + 扩展运算符 + string新增方法 + Map + Set -- 暑假Day7
目录解构赋值扩展运算符string的新增方法startsWith() 和 endsWith()repeat()方法MapMap的方法迭代Setset的方法迭代解构赋值分解数据结构,一一赋值es6中允许从数组中提取值,按照对应位置,给变量赋值,也可以对对象进行结构let arr = [1, 2, 3];let [a, b, c, d, e] = arr;console.log(a);//1console.log(b);//2console.log(c);//3console.log(d);/原创 2021-07-19 22:30:36 · 92 阅读 · 0 评论 -
前面内容的复习 + Object.defineProperty() + 函数(this,严格模式,高阶函数,闭包,递归,拷贝) -- 暑假Day6
目录函数进阶函数里面的this指向严格模式高阶函数闭包递归拷贝浅拷贝Object.defineProperty();里面有三个属性,这个方法用于定义对象中新属性或修改原有属性,第一个参数是想要修改的对象的对象名,第二个参数是对象的新的属性名或者原有的属性名,第三个参数是一个对象,书写属性的参数,第三个对象里面的值如下图中的第二个属性其实就是属性值可不可以被修改的意思函数进阶可以利用new Function(‘参数1’, ‘参数2’, ‘函数体’)来定义函数参数可以是多个 var f原创 2021-07-16 22:16:26 · 228 阅读 · 0 评论 -
主要是前面知识的补充,构造函数和原型 -- 暑假Day5
构造函数和原型在es6之前是用构造函数和原型来实现类的功能把共有属性放在构造函数里面,然后通过创建不同的对象来使用相同的功能构造函数里面的属性和方法被称之为成员,成员可以添加实例成员:构造函数内部通过this添加的成员,只能通过实例化的对象来访问,不能通过构造函数来访问静态成员:在构造函数上面直接添加的属性(不是通过this添加的),只能通过构造函数来访问构造函数存在浪费内存的缺陷为了避免这种因为方法的重复而导致的内存浪费,建议把共同方法直接放在原型对象里面实例对象的__proto__方法和原创 2021-07-15 22:51:29 · 64 阅读 · 0 评论 -
昨天的补充,包括constructor,inserAdjacentHTML,click,ondblclick
箭头函数没有super继承的 constructor 执行时,不会创建空对象,所以就不会将空对象赋值给this,但是正常创建的会进行这样的操作,子类在没有这种操作的时候,就会找向父类,所以必须调用父级的constructorondbclick()在短时间内双击同一元素后触发,现在已经很少使用了onclick是绑定事件,click是方法,会触发onclick事件select事件是只有textarea和文本类型的input元素中的文本被选中的时候会发生的事件...原创 2021-07-15 16:17:46 · 64 阅读 · 0 评论 -
ES6初始,类和对象 -- 暑假Day4
ES6面向对象的特性封装性继承性多态性面向对象的思维特点:先把共有属性和行为封装成一个类 ,然后对类进行实例化,获取类的对象类和对象类是泛指的某一大类,对象是特指的某一个对象创建类用class声明一下,然后在下面new一下class Star { constructor(name){ this.name = name; }}var xxx = new Star('xxx');类里面有一个必须要有的函数,就是constructor函数(在生成原创 2021-07-14 21:16:58 · 59 阅读 · 0 评论 -
XHTML + XML + AJAX --暑假day3
目录浅谈XHTML浅谈XML作用XML的树结构语法规则命名规则XMLHttpRequest 对象AJAX浅谈XHTMLXHTML就是更加严格的html,目标是取代html必须小写严格遵循嵌套规则严格符合语法XHTML元素必须要被关闭空标签应该在>的前面加上/,这样来关闭标签不能简写属性把HTML里面的name属性更换成了id在这个/的前面要添加一个空格,用来兼容浏览器<img src="picture.gif" id="picture1"原创 2021-07-13 22:45:34 · 117 阅读 · 0 评论 -
箭头函数 + Symbol -- 暑假Day2
目录箭头函数箭头函数与普通函数的区别1. 没有this2. 没有argumentsSymbol类型隐藏属性全局Symbol还有系统Symbol,但是目前没看到Debugger 命令,就是直接在函数内部写debugger,然后函数会停止在这里箭头函数箭头函数,创建函数的另一种简便方法 let test = (a, b) => a + b; let test = function (a, b) { return a + b; }上述两种表达的意思是一样的原创 2021-07-12 23:15:12 · 68 阅读 · 0 评论 -
函数 + 基本包装类 + global + Math对象 -- 暑期day1
目录归并方法(reduce,reduceRight)函数(Function)bind()方法基本包装类string类型Global对象URI编码方法eval()方法Math对象在往这些方法里面可以传入一个函数,函数拥有三个参数,分别是数组项的值,该项在数组中的位置,数组对象本身every()每一项都返回true的时候才会返回truefilter()将在给定函数返回true的每一项组成一个新数组,然后返回新数组(可以查询有些符合条件的数组项)forEach()没有返回值map(原创 2021-07-11 22:44:57 · 143 阅读 · 0 评论 -
改变this指向的三个方法的用法及区别
call,apply和bind作用:改变this的指向function Person(age) { this.age = age;}var obj = {};// Person();Person.call(obj, 18);// 这两种执行是一样的,准确来说,上面的那种执行实际上就是下面的那种执行// 在call传入obj会让Person里面的this全部替换成obj,相当于在最初的时候,Person里面的this全部指向window,现在都有了新的地址,就是obj的,从第二开始传原创 2021-07-11 22:41:08 · 3493 阅读 · 0 评论 -
数组(Array)的方法 -- 大一下第十五周 + 第十六周
数组(Array)的方法toLocaleString()方法toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。语法:arr.toLocaleString([locales[,options]]);返回值和toString()一样shift()方法用于把数组第一个元素从中删除,并返回第一个元素的值语法:arrayObject.shif原创 2021-06-15 21:07:01 · 122 阅读 · 0 评论 -
object的部分属性和方法 + 逗号操作符 + label语句 + with + switch + 参数 + typeof和instanceof检测类型 -- 大一下第十五周
目录object的一部分属性和方法逗号操作符label语句with语句switch语句参数(原始值和引用值的区别)检测类型typeofinstanceof小记valueOf() 方法可以字符串返回数字。Unicode(统一码、万国码、单一码)是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。Unicode包含ASCIIvisibility 属性,规定元素是否可见input的一些事件,和其他元素有点原创 2021-06-14 22:31:31 · 239 阅读 · 0 评论 -
大一上的零零碎碎的笔记
让文字上下居中:line-height属性加上设置宽的像素值图片的属性:object-fit,表示图片的适用方式默认是fill,表示图片把边框填充满object-fit:fillcontain 表示不要打破图片比例,也保证图片不要溢出cover 表示把边框填充满,同时不打破图片比例,所有会有溢出。a元素为什么不会继承父元素的元素?因为a元素存在确定声明值,所以在属性值计算的第一步就拥有了属性,所以不能继承父元素的颜色。background的color覆盖的是content,border,原创 2021-06-11 10:39:51 · 69 阅读 · 0 评论 -
逗号在js中的作用
逗号逗号操作符声明多个变量 var a = 1, b = 2, c = 3;用于赋值,结果是最后一个数 var a = (1, 2);//结果a = 2 var num = (1, 2, 3, 0);//结果num = 0建议再把逗号用于赋值的时候给式子添上小括号避免报错如果再有发现那就继续补充...原创 2021-06-09 15:34:48 · 348 阅读 · 0 评论 -
小知识点 + 贪吃蛇 -- 大一下第十四周
html里面的img元素只设宽不设高就会随着页面等比例缩放一般通过用创建的init方法来进行整体的初始化forEach()是for的精简版用于循环次数未知,循环次数难计算的情况下foreach不支持在循环中添加删除操作,因为在使用foreach循环的时候数组(集合)就已经被锁定不能被修改array.forEach(function(currentValue, index, arr), thisValue)splice()方法从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原.原创 2021-06-06 20:56:57 · 205 阅读 · 2 评论