- 博客(37)
- 收藏
- 关注
原创 Vue2尚品汇前台项目笔记——(1)项目初始化
路由组件与非路由组件的区别?1:路由组件一般放置在pages|views文件夹,非路由组件一般放置components文件夹中2:路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候,一般都是以标签的形式使用3:注册完路由,不管路由路由组件、还是非路由组件身上都有routeroute、routerouter属性$route:一般获取路由信息【路径、query、params等等】
2024-02-19 17:09:16
936
原创 Axios学习
现在假设我们的项目,它的接口数据服务不是来在于单一的一个服务器,如果我们去使用默认配置去设置的话,那么我们只能实现一个服务器的接口数据,另一个又得重新配置该接口的相应的数据,这样想来也并不合适,所以这时候我们可以创建两个对象,如果我们要给a发送请求时,我们就去借助a对象来实现,同理b也一样。 但这里有一个问题,我看视频里老师在请求体里是不用写对应的id的,但如果我不写的话,新添加的数据对应的id是一段看不懂的字符串,并不是字符串3,所以我在这里自己对数据设定了id。删除数据同理,删除对应id号的数据。
2024-02-18 12:20:03
850
原创 手撕Promise
文章目录一、Promise的初体验1.初体验——抽奖案例二、Promise的实践练习1.实践练习——fs读取文件2.实践练习——AJAX请求三、Promise的常见骚操作1.封装fs读取文件操作2.util.promisify方法进行promise风格转化3.封装原生的Ajax4.Promise实例对象的两个属性(1)状态属性`PromiseState`(2)结果值属性`PromiseResult`5.Promise的工作流程四、Promise中的API(1).then和.catch(2)Promise.r
2024-02-14 21:19:35
934
原创 JS高级(四)- 深浅拷贝、异常处理、处理this、防抖节流md
都可以改变函数内部的this指向call和apply会调用函数,并且改变函数内部this指向.call和apply传递的参数不一样,call传递参数aru1,aru2…形式 apply必须数组形式[arg]bind 不会调用函数,可以改变函数内部this指向.call 调用函数并且可以传递参数apply经常跟数组有关系.比如借助于数学对象实现数组最大值最小值bind 不调用函数,但是还想改变this指向.比如改变定时器内部的this指向.
2024-02-11 14:52:39
560
原创 JS高级(三)-编程思想、构造函数、原型对象、综合案例
同样的将变量和函数组合到了一起并能通过 this 实现数据的共享,所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承。但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了。基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对。
2024-02-05 16:52:03
629
原创 JS高级(二)-深入对象、内置构造函数、综合案例
的数据类型有 6 种,分别是字符串、数值、布尔、undefined、null 和 对象,常见的对象类型数据包括数组和普通对象。之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的,被称为包装类型。在 JavaScript 内置了一些构造函数,绝大部的数据处理都是基于这些构造函数实现的,JavaScript 基础阶段学习的。查找元素, 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined(重点)
2024-02-02 21:55:20
1705
原创 JS高级(一)-作用域、函数进阶、解构赋值、综合案例
JavaScript 中的作用域是程序被执行时的底层机制,了解这一机制有助于规范代码书写习惯,避免因作用域导致的语法错误。知道函数参数默认值、动态参数、剩余参数的使用细节,提升函数应用的灵活度,知道箭头函数的语法及与普通函数的差异。解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上。如下图所示,父子关系的作用域关联在一起形成了链状的结构,作用域链的名字也由此而来。
2024-01-31 16:30:13
928
原创 Javascript(四):作用域、JS预解析、对象
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。1.JavaScript作用域:就是代码名字(变量)在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突2.js的作用域(es6)之前:全局作用域局部作用域3.全局作用域:整个script标签或者是一个单独的js文件。
2024-01-28 17:18:00
796
原创 Vue2通用后台管理项目笔记-axios,ajax,element-ui,vuex,vue-router
vue2前端通用后台管理项目笔记,这个做完准备去一边看js高级,一边看coderwhy的算法,保证这个学期找到实习
2024-01-27 20:55:03
1880
原创 Vue2(十二):Vuex
注意Vue2一定要安装vuex3,如果是vue3可以直接npm i vuex安装的是vuex4,可以去文件里看下vue的版本是啥,千万别输错了,不然会陷入痛苦的报错……
2023-12-27 11:15:18
1086
原创 Vue2(十一):脚手架配置、vue-resource、插槽
这里就用到了作用域插槽,如果数据不在App中了,而在Category.vue中,然后App.vue要用到数据,这时我们就可以在Category.vue中使用slot标签给父组件App传值,写法很像当时父给子传值的props写法,在标签里搞个。比如有那么一天,我们要在页面显示三个类别,每个类别下面有不同的文字,本来是我们把数据传给子组件然后使用v-for遍历生成的文字信息,但是产品经理突然让你把美食类的下面换成图片,电影类下面换成视频,怎么搞。1、优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
2023-12-27 11:09:35
421
原创 Vue2(十):全局事件总线、消息订阅与发布、TodoList的编辑功能、$nextTick、动画
因为接收数据的组件A中定义的回调函数和自定义事件是绑定的,而这个用来接收数据的组件实例A都销毁了,回调函数也没了,那这个xxxx自定义事件也就没用了,你留着会污染全局环境(这块儿有点迷糊)这玩意儿用的不多,和全局事件总线写法差不多,但是全局事件总线更好,因为是在Vue身上操作,但是这个的话要引入第三方库,库有很多,比如pubsub-js。,那每次点击编辑按钮,都会添加一次isEdit属性,这样是不太好的,所以要加个判断,添加过了就改成true,没添加过就添加个true。,而且原来的span要隐藏。
2023-12-27 11:07:38
576
原创 Vue2(九):浏览器本地存储、组件自定义事件
1、一种组件间通信的方式,适用于:子组件 ===> 父组件2、使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B的标签绑定自定义事件(事件的回调在A中,用来接收数据)。3、绑定自定义事件:<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>......(3)若想让自定义事件只能触发一次,可以使用.once修饰符,或$once方法。this.$emit('atguigu',数据)给谁绑的就找谁触发5、解绑自定义事件。
2023-12-19 10:28:14
451
原创 Vue2(八)TodoList案例
(1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。(2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:一个组件在用:放在组件自身即可。一些组件在用:放在他们共同的父组件上(状态提升)。(3)实现交互:从绑定事件开始。
2023-12-19 10:27:20
819
原创 Vue2(七):脚手架、ref属性、props配置项、mixin混入、插件、scoped样式
定义在另一个js文件中,这里定义在mixin.js中methods: {},console.log('混合里的mounted优先调用');可以在另一个js中配置插件,然后通过import引入到main.js中看看下面的代码,复习复习之前的知识//第一个参数是Vue构造函数//后面的参数是使用者传进来的东西123//1.定义一个全局过滤器//返回值别忘了});//2.定义一个全局自定义指令,元素默认获取焦点},el.focus();},})
2023-12-11 13:29:58
1018
原创 Vue2(三):绑定样式、条件渲染、列表渲染、列表过滤、列表排序
这个案例再次体现出计算属性的强大之处,只要get里用到的数据(keyword,sortType)发生改变,get都会重新执行,模板都会重新解析,这个业务逻辑就实现了。2、语法:v-for=“(item, index) in xxx” :key=“yyy”,其中xxx是遍历的目标,yyy是唯一的索引,用于区分每个嘎达。(2)旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面。数组写法适用于:要绑定多个样式,但是不确定绑定哪几个,就写成数组,省的一个一个绑定。
2023-11-05 19:00:00
384
原创 Vue2(六):组件化编程
使用创建,其中options和时传入的那个options几乎一样,但也有点区别;(1)el不要写,为什么?最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。备注:使用template可以配置组件结构。(2)data必须写成函数,为什么?避免组件被复用时,数据存在引用关系,比如我父组件要多次复用一个子组件,那如果其中一个子组件做了修改数据操作,其他复用的地方数据也会被修改。看看下面的代码,就明白了//1.data定义为对象,里面的值有人一改,那全都用到底地方都改了。
2023-11-05 15:02:01
74
原创 Vue2(五):收集表单数据、过滤器、自定义指令、生命周期
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理比如价格1999改成1,999等需求,复杂的用计算属性或方法)。语法:或{{ xxx | 过滤器名}}或v-bind:属性 = "xxx | 过滤器名"(第二种几乎不用)备注:1、过滤器也可以接收额外参数、多个过滤器也可以串联2、并没有改变原本的数据, 是产生新的对应的数据v-bind: 单向绑定解析表达式, 可简写为 :xxxv-model: 双向数据绑定v-for: 遍历数组/对象/字符串v-on。
2023-11-05 15:00:20
117
原创 Vue2(四):Vue监测数据的原理
Vue监视数据的原理1.vue会监视data中协有层次的数据。2.如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,propertyName/index,value) 或3.如何监测数组中的数据?
2023-11-05 14:58:50
170
原创 Vue2(二):计算属性、监视属性
定义:要用的属性不存在,要通过Vue中已有属性计算得来。原理:底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。备注:1.计算属性最终会出现在vm上,直接读取使用即可,不用加括号,和methods区别一下子。2.如果计算属性要被修改,那必须写set函数去响应修改,
2023-11-05 14:56:23
419
原创 Vue2(一):初识Vue,模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件相关内容
数据代理:通过一个对象代理另一个对象中属性的操作(读/写)比如下面这个案例,我们可以通过obj2来管理obj1里面的x(读/写)记住这个案例,后面的理解起来可能会容易些//数据代理:通过一个对象代理另一个对象中属性的操作(读/写)//通过obj2来读取或修改obj1里的xget() {console.log('有人要通过obj2读取obj1里的x');},set(val) {console.log('有人要通过obj2修改obj1里的x');})
2023-10-16 15:37:02
191
1
原创 ES6笔记
简单来说,想知道箭头函数中的this指向谁,就看这个箭头函数外边有没有包裹函数,如果它外面有函数,那么this指向的就是外层包裹函数的this,如果没有包裹函数,this指向的就是window。但是如果我把监听事件里的函数写成箭头函数,this的绑定就消失了,此时this指向的是外层包裹函数的this,也就是drop函数里的this,也就是Dj对象,这样的话就可以找到dance方法了。这完全不像 Generator 函数,需要调用next方法,或者用co模块,才能真正执行,得到最后结果。
2023-10-11 09:31:23
89
1
原创 Javascript(七):BOM、PC网页特效
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape览器标准的一部分。DOM①文档对象模型②DOM就是把[文档]当做一个[对象]来看待③DOM的顶级对象是document④DOM主要学习的是操作页面元素。
2023-10-06 11:53:06
91
1
原创 Javascript(六):Web Apis、DOM、事件高级
文档对象模型(DocumentObjectModel,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。###1.2 DOM树·文档:一个页面就是一个文档,DOM中使用document表示·元素:页面中的所有标签都是元素,DOM中使用element表示·节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示。
2023-10-03 16:37:25
152
1
原创 Javascript(五):内置对象、简单数据类型和复杂数据类型
Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用Math中的成员。Math.PI//圆周率Math.floor() //向下取整Math.ceil() //向上取整Math.round() //四舍五入版就近取整注意-3.5结果是-3Math.abs ( ) //绝对值Math.max()/Math.min() //求最大和最小值//1.绝对值方法//1//1//隐式转换会把字符串型-1转换为数字型。
2023-09-27 13:22:30
70
1
原创 JavaScript(二):运算符、流程控制
概念:算术运算使用的符号,用于执行两个变量或值的算术运算。如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(–)运算符来完成。在JavaScript中,递增(++)和递减(–)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。
2023-09-19 19:36:46
83
原创 Javascript(一):变量,数据类型
白话:变量就是一个装东西的盒子。通俗:变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。我们通常会实现3种方式的转换:①转换为字符串类型②转换为数字型③转换为布尔型。
2023-09-18 12:50:59
150
1
原创 Html+CSS
1.HTML标签是由尖括号包围的关键词,例如。2.HTML标签通常是成对出现的,例如和,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。3.有些特殊的标签必须是单个标签(极少情况),例如<b「/>,我们称为单标签。1.以上三个代码vscode自动生成,基本不需要我们重写.2.文档类型声明标签,告诉浏览器这个页面采取htm15版本来显示页面.3.<html lang="en”>告诉浏览器或者搜索引擎这是一个英文网站.本页面采取英文来显示。
2023-09-16 16:35:55
2282
1
原创 攻防世界Web(xs练习区) 更新中~
前些日子,学长和我们开了个会,其中提到一点说一定要自己写博客,于是现在开始第一次着手尝试写写看(PS:本博客纯属记录个人的学习历程,不带任何学术成分,甚至部分内容可能摘自他人的文章,如有侵权,告知我后一定会及时删除。)第一题 view_source获取场景后会出现这样的画面:说实话,看到的第一眼,我是这个表情的。FLAG不在这那你让我上哪里去找?但是毕竟题目描述里说了要去看网页的源代码,那也别管那么多了,直接F12吧。结果FLAG就直接出现了!虽然我不理解...
2021-12-19 13:49:41
106
hnust计算机组成原理课设
2022-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人