- 博客(79)
- 收藏
- 关注
原创 Vue的基础知识点学习笔记(一)
Vue框架采用MVVM模式去管理应用程序的数据模型盒试图界面的交互,即数据驱动视图,从而避免了操作DOM。MVVM(全称Model-View-ViewModel)是一种,将视图(View)与模型(Model)通过视图模型(ViewModel)作为桥梁连接起来。
2024-12-15 21:27:07
575
1
原创 项目页面渲染学习总结
设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。direction:指定渐变的方向(如果不设置方向,默认从上到下)拓展:在颜色后面加上数值可以设置每个颜色渐变到下一个颜色的长度。vw、vh是CSS3新单位,与百分比%一样都是相对长度单位。从100px开始到150px渐变到黑色。从100px开始到100px渐变的黑色。:该属性需要给盒子设置宽高才能生效。用于创建一个线性渐变的图像。
2024-12-08 20:43:22
359
原创 大事件项目总结(下)
通过Element-UI组件库库中的el-table组件来设置表格可以更方便获取到数据。使用template中的作用域插槽,可以让我们在外部获取组件内的数据。
2024-12-01 20:29:36
976
原创 大事件管理系统项目总结(上)
使用pinia多层文件夹嵌套时,导入某个文件的路径会很长,容易写错,此时可以创建一个index.js出口文件来集合所有要导出的仓库,当要用某些仓库时,可以直接从index.js中导入仓库即可。// 或者:import { useUserStore } from '@/stores' // 导入useUserStore模块</script><template>// ...</style>
2024-11-24 20:08:17
513
原创 Vue3学习笔记(下)
可以用defineOptions定义任何选项,props,emits,expose,slots除外(因为这些可以使用defineXXX来做到。语法糖下组件内部的属性和方法是不开放给父组件访问的,但可以通过defineExppose编译宏指定哪些属性和方法允许访问。注意:由于写了setup,所以无法直接配置props选项,所以,此处需要借助“编译器宏”函数接收子组件传递的数据。底层组件如何修改顶层组件的数据:顶层组件给子孙后代传递可以修改数据的方法,底层组件调用。它将为每一个响应式属性创建引用。
2024-11-17 20:35:19
1327
原创 Vue3学习笔记(上)
create-vue是vue官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应。app.vue - 根组件(SFC单文件组件script - template)vite.config.js - 项目的配置文件(基于vite的配置)本质:在原有传入数据的基础上,外层包了一层对象,包成了复杂数据类型。作用:接收简单类型或者对象类型的数据传入并返回一个响应式对象。作用:侦听一个或多个数据的变化,数据变化是执行回调函数。作用:接受对象类型数据的参数传入并返回一个响应式的对象。
2024-11-10 21:07:21
843
原创 Vuex的基础
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。状态管理模式:把组件的共享状态抽取出来,以一个全局单例模式管理。这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为。通俗来讲:vuex是一个vue的状态管理工具,状态就是数据。
2024-10-27 19:31:47
657
原创 Vue中使用路由
linkActiveclass: "类名1", // 配置模糊匹配的类名linkExactActiveClass: "类名2" // 配置精确匹配的类名})
2024-10-20 22:54:40
1306
原创 ESlint代码规范
JavaScript Standard Style规范说明:https://standardjs.com/rules-zhcn.html。代码规范:一套写代码的约定规则。例如:“赋值符号左右是否需要空格” “一行代码结束是否要加分号”基于vscode插件ESLint高亮错误,并通过配置自动帮助修复错误。如果不认识命令行中的语法报错是什么意思,根据错误代码去【根据错误提示来一项一项手动修改。
2024-10-20 22:53:32
548
原创 前端考核总结
闭包:一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域(闭包 = 内层函数 + 内层函数引用的外层函数的变量)。flex是flexible Box的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局。// 如果里面存储大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿。// 如果里面存储大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿。作用:封闭数据,提供操作,使外部也可以访问函数内部的变量。
2024-09-29 22:21:57
1556
原创 Vue的指令v-model的原理
原理:v-model本质上是一个语法糖。例如应用在输入框上,就是value属性和input事件的合写。作用:提供数据的双向绑定:value@input$event用于在模板中获取事件的形参。
2024-09-22 22:08:46
614
原创 Vue的使用
常见的表单元素都可以用v-model绑定关联,快速获取或设置表单元素的值,它会根据控件类型自动选取正确的方法来更新元素。为了方便开发者进行样式控制,Vue扩展了v-bind的语法,可以针对class类名和style行内样式进行控制。Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】—— 让开发者可以在特定阶段运行自己的代码。概念:基于现有的数据,计算出来的新属性。数组:数组中所有的类,都会添加到盒子上,本质就是一个class列表。Vue会根据不同的指令,针对标签实现不同的功能。
2024-09-17 20:40:59
1635
原创 初识Vue
概念:Vue是一个用于构建用户界面的渐进式框架。Vue的两种使用方式:Vue核心包开发场景:局部模块改造Vue核心包&Vue插件工程化开发场景:整站开发优点:大大提升开发效率。缺点:需要理解记忆规则。
2024-09-17 20:40:15
643
原创 JavaScript考核详解
而局部变量声明在函数中,它的生命周期从函数执行开始,直到函数执行结束,在这个过程中,局部变量会在堆或栈中存储它们的值,当函数执行结束后,这些局部变量不再被使用,它们所占有的空间就会被释放。:var存在变量提升,var声明的变量会被提升到作用域的顶层,但该声明不包括赋值,所以虽然if判断里的语句虽然并不会执行,但其实已经在fn函数作用域内的顶部声明了一个未被赋值的tmp变量,所以。的数组方法,它可以用来实现数组的扁平化,其默认只会扁平化一层,但你可以通过传递一个整数参数来指定扁平化的深度,如果深度为。
2024-09-17 20:39:26
1360
原创 前端与后端的身份认证
当生成JWT字符串的时候,需要使用secret密钥对用户的信息进行加密,最终得到加密好的JWT字符串当把JWT字符串解析还原成JSON对象的时候,需要使用secret密钥进行解密。
2024-09-01 20:50:21
1395
原创 MySQL的基本使用
SQL是结构化查询语言,专门用来访问和处理数据库的编程语言。能够让我们以编程的形式,操作数据库里面的数据。SQL是一门数据库编程语言。使用SQL语言编写出来的代码,叫做SQL语句。SQL语言只能在关系型数据库中使用(例如MySQL、Oracle、SQL Sever)。非关系型数据库不支持SQL语言。
2024-08-04 22:16:36
812
原创 Express框架学习笔记
/ 常量mw所指向的,就是一个中间件函数// 注意:当前中间件业务处理完毕后,必须调用next()函数// 表示把流转关系转交给下一个中间件或路由next()需求:自己手动模拟一个类似于express.urlencoded这样的中间件,来解析POST提交到服务器的表单数据。定义中间件监听req的data事件监听req的end事件使用querystring模块解析请求体数据将解析出来的数据对象挂载为req.body将自定义中间件封装为模块。
2024-08-04 22:15:36
959
原创 npm与webpack的学习笔记
定义:npm是Node.js标准的软件包管理器。它起初是作为下载和管理Node.js包依赖的方式,但其现在也已成为前端JavaScript中使用的工具。
2024-07-28 18:19:21
1361
原创 Ajax学习笔记
定义:asyn和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用Promise。概念:在async函数内,使用await关键字取代then函数,等待获取Promise对象成功状态的结果值。定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制,就叫事件循环。axios响应拦截器:响应回到then/catch之前,触发的拦截函数,对响应的结果统一处理。Promise本身是同步的,而then和catch回调函数是异步的。
2024-07-21 17:13:47
1206
1
原创 Node.js学习笔记
前端工程化:开发项目直到上线,过程中集成的所有技术和工具。Node.js是前端工程化的基础(因为Node.js可以主动读取前端代码内容。Node.js模块化:概念:每个文件当做一个模块,独立作用域,按需加载使用:采用特定的标准语法导出和导入进行使用CommonJs标准:一般应用在Node.js项目环境中ECMAScript标准:一般应用在前端工程化项目中Node.js包:概念:把模块文件,代码文件,其他资料聚合成一个文件夹项目包:编写项目需求和业务逻辑的文件夹。
2024-07-21 17:07:38
1101
原创 JavaScript的面向对象思想及实现
基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种l链状的结构,我们将原型对象的链状结构关系称为原型链。指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有。继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript中大多是借助原型对象实现继承的特性。同样的将变量和函数组合到了一起并能通过this实现数据的共享,不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。
2024-06-11 16:42:32
728
原创 JavaScript常用的内置构造函数
之所以具有对象特征的原因是字符串、数字、布尔类型数据是JavaScript底层使用Object构造函数“包装”来的,被称为包装类型。JavaScript底层会把简单数据类型包装为引用数据类型,所以简单数据类型也可以使用属性和方法方法。在JavaScript中的字符串、数字、布尔具有对象的使用特征,如具有属性和方法。,如果省略结束的索引,默认取到最后,截取的索引号不包含想要截取的部分。Object是内置的构造函数,用于创建普通对象。Number是内置的构造函数,用于创建数值。注意:返回的是一个数组。
2024-06-11 16:42:01
876
原创 JavaScript深入对象
通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员(实例属性和实例方法)。构造函数命名时约定以大写字母开头,它们只能由new操作符来执行。:构造函数的属性和方法被称为静态成员(静态属性和静态方法)构造函数是一种特殊的函数,主要用来初始化对象。使用场景:用来快速创建多个类似的对象。利用new Object创建对象。为构造函数传入参数,创建。构造函数创建的实例对象。利用构造函数创建对象。
2024-06-11 16:41:11
470
原创 JavaScript的解构赋值
目标:知道解构的语法及分类,使用解构简洁语法快速为变量赋值。数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。可以通过给定默认值解决。可以使用剩余参数解决。
2024-06-02 17:09:41
271
原创 JavaScript函数进阶学习
引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁。在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值。箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。剩余参数允许我们将一个不定数量的参数表示伪一个数组,在函数内部中使用。使用场景:箭头函数更适用于那些本来需要匿名函数的地方。以前this的指向:谁调用这个函数,this就指向谁。)可以将一个数组展开,在数组中使用。了解函数的使用细节,提升函数应用的灵活度。
2024-06-02 17:08:35
537
1
原创 JavaScript中内存的分配和回收——垃圾回收机制及算法
如果两个对象相互引用,尽管他们已不再使用,垃圾回收器不会进行回收,导致内存泄露,因为他们的引用次数永远不会是0,这样的相互引用如果大量存在会导致大量的内存泄露。IE采用的引用计数算法,定义“内存不再使用”,就是看一个对象是否有指向它的引用,没用引用了就回收对象。现代的浏览器已经不再使用引用计数算法,使用的大多是基于标记清除算法的某些改进算法,总体思想都是一致的。JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收。但引用计数法存在一个致命的问题:嵌套引用(循环引用)
2024-06-02 17:07:11
430
原创 JavaScript中的作用域和作用域链
一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域(闭包 = 内层函数 + 内层函数引用的外层函数的变量)。变量提升是JavaScript中比较“奇怪”的现象,它允许变量在被声明之前访问(仅存在于var声明变量)。标签和js文件的最外层就是所谓的全局作用域,在此声明的变量在函数内部也可以被访问。作用域规定了变量能够被访问的“范围”,离开了这个范围变量便不能访问。封闭数据,提供操作,使外部也可以访问函数内部的变量。作用域链的本质上是底层的变量查找机制。局部作用域分为函数作用域和块作用域。
2024-06-02 17:03:47
324
原创 通过JavaScript本地存储数据
可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在。本地存储只能存储字符串类型,非字符串类型会转换成字符串类型存储。需要将复杂数据类型转换成JSON字符串,再存储到本地。本地只能存储字符串,无法存储复杂数据类型。
2024-05-26 19:21:25
614
原创 window对象的常见属性及各个BOM对象的功能含义
这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果js执行时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。于是,js中出现了同步和异步。history的数据类型是对象,主要管理历史记录,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等。navigator的数据类型时对象,该对象记录了浏览器自身的相关信息。
2024-05-26 19:20:00
649
原创 JavaScript的事件流、页面加载事件与元素滚动事件
当初始的HTML文档被完全加载和解析完成后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载。当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发(当一个元素的事件触发时,会依次调用所有父级的。利用事件冒泡的特点,给父元素注册事件,当我们触发子元素时,会冒泡到父元素身上,从而触发父元素事件。目的:防止事件影响父级元素,将事件限制在当前元素内(不仅可以阻止事件冒泡,也可以阻止事件捕获)。从DOM的根元素开始去执行对应的事件(从父到子,从外到里)
2024-05-19 18:52:56
1008
原创 JavaScript中的日期对象
时间戳是指两个时间相差的毫秒数,它是一种特殊的计量时间的方式,用于实现倒计时效果。因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式。日期对象:用来表示时间的对象,可以得到当前的系统时间。
2024-05-19 18:52:15
658
原创 JavaScript的节点操作、移动端事件和插件运用
很多时候,我们需要在页面中动态增加元素,比如点击发送按钮,新增一条评论信息。touch对象代表一个触摸点。触屏事件可响应用户手指或触控笔对屏幕的操作。目标:能够具备根据节点关系查找目标节点的能力。DOM数里的每一个内容都称之为结点。M端是移动端,有自己独有的事件。
2024-05-19 18:51:58
312
原创 JavaScript中的事件监听
事件监听:让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也被称为绑定事件或注册事件。比如鼠标经过时显示下拉菜单,比如点击可以播放轮播图等。事件对象也是个对象,这个对象里有事件触发时的相关信息,例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息。环境对象指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境,this指向函数的调用者。事件:在编程时系统内发生的动作,比如用户在网页上单击一个按钮。如果将函数A作为参数传递给函数B时,我们称函数A为回调函数。
2024-05-12 19:25:55
490
原创 API中DOM元素的获取和操作
标准属性:标签自带的属性,可以直接操作,比如:disabled、checked等在html5中推出来专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取</</</const'div'log// 1 alog// 1</</</
2024-05-12 19:05:07
470
原创 JavaScript中的函数
函数可以把具有相同或相似逻辑的代码包裹起来,通过函数调用执行这些被包裹的代码逻辑,这么做的优势是有利于精简代码方便复用。通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。函数表达式和具名函数的不同:具名函数的调用可以写在任何位置,函数表达式像变量一样,要先声明后才能使用。函数或for循环、while循环中定义的变量是局部变量,只能在当前作用域使用,不能在作用域外被调用。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
2024-05-05 20:02:25
462
1
原创 JavaScript中的对象
对象(object)是JavaScript里的一种数据类型,可以理解为一种无序的数据集合(数组是有序的数据集合),通常用来描述某个事物。是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般都是名词性的。数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。来遍历,因为它的属性的存储是无序的,不像数组是有序的,可以用下标来遍历。Math.max —— 在一组数中找出最大的。
2024-05-05 20:00:58
628
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人