前端
文章平均质量分 83
duration~
将语言当做协议,聊天当做通信,将说话的内容当做数据。上下层之间进行交互时所遵循的约定叫做“接口”,通信双方同一层之间的交互所遵循的约定叫做“协议”。
展开
-
Vue3 状态管理 - Pinia
Pinia 是 Vue 的专属的最新状态管理库 ,是 Vuex 状态管理工具的替代品。原创 2024-03-09 19:06:38 · 392 阅读 · 0 评论 -
Vue2->3
Vue 3 是 Vue.js 的第三个主要版本,它在 2020 年发布。相对于 Vue.js 2.x 版本,Vue 3 带来了一些重要的改进和增强,包括更好的性能、更快的启动时间、更好的 TypeScript 支持、新的 Composition API 等。这些改进使得 Vue 3 成为更加强大和灵活的工具,能够更好地满足开发人员的需求。原创 2024-03-02 12:35:22 · 964 阅读 · 0 评论 -
Vuex状态管理
目标:明确Vuex是什么,应用场景以及优势1.是什么Vuex 是一个 Vue 的 状态管理工具,状态就是数据。大白话:Vuex 是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如:购物车数据 个人信息数2.使用场景某个状态 在 很多个组件 来使用 (个人信息)多个组件 共同维护 一份数据 (购物车)3.优势共同维护一份数据,数据集中化管理响应式变化操作简洁 (vuex提供了一些辅助函数)不是所有的场景都适用于vuex,只有在必要的时候才使用vuex。原创 2024-02-20 17:20:34 · 985 阅读 · 0 评论 -
Vue路由
Vue 官方的一个路由插件,是一个第三方包原创 2024-02-17 21:18:51 · 1262 阅读 · 0 评论 -
Vue插槽
让组件内部的一些 结构 支持 自定义将需要多次显示的对话框,封装成一个组件组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办MyDialog.vueApp.vue6.总结场景:组件内某一部分结构不确定,想要自定义怎么办使用:插槽的步骤分为哪几步?通过插槽完成了内容的定制,传什么显示什么, 但是如果不传,则是空白能否给插槽设置 默认显示内容 呢?封装组件时,可以为预留的 插槽提供后备内容(默认内容)。在 标签内,放置内容, 作为默认显示内容外部使用组件时,不传东西,则slot会显示后备内容外原创 2024-02-15 13:45:55 · 1304 阅读 · 0 评论 -
Vue自定义指令
这都是Vue给内置的一些指令,可以直接使用自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念:自己定义的指令,可以封装一些DOM操作,扩展额外的功能全局注册//在main.js中Vue.directive('指令名', {"inserted" (el) {//inserted 表示被插入时生效,双引号可以略// 可以对 el 标签,扩展额外功能el.focus()})局部注册//在Vue组件的配置项中"指令名": {原创 2024-02-14 18:36:21 · 1212 阅读 · 0 评论 -
v-model原理
实现子组件和父组件数据的双向绑定 (实现App.vue中的selectId和子组件选中的数据进行双向绑定)不同的表单元素, v-model在底层的处理机制是不一样的。v-model其实就是 :value和@input事件的简写。v-model本质上是一个语法糖。例如应用在输入框上,就是。用于在模板中,获取事件的形参。父组件通过v-model。,实现子组件和父组件数据。原创 2024-02-13 18:06:12 · 1208 阅读 · 0 评论 -
Webpack模块打包工具
了解 Webpack 的概念和作用,以及使用。原创 2024-01-10 16:49:38 · 1040 阅读 · 0 评论 -
Node.js和npm
什么是 Node.js,有什么用,为何能独立执行 JS 代码,演示安装和执行 JS 文件内代码了解模块化概念和好处,以及 CommonJS 标准语法导出和导入把上面学的模块化语法,包的概念,常用命令进行总结。原创 2024-01-09 10:54:29 · 1398 阅读 · 0 评论 -
展开运算符(Spread Operator)
展开运算符(Spread Operator)是ES6中引入的一种语法,使用三个连续的点(它可以在多种场合下使用,主要用途是“展开”数组或对象中的元素或属性。请注意,在合并对象时,如果有重复的键,则后面展开的对象属性会覆盖前面的。展开运算符大大简化了某些操作,并使代码更整洁和易读。原创 2024-01-09 10:39:34 · 515 阅读 · 0 评论 -
展开运算符(Spread Operator)
展开运算符(Spread Operator)是ES6中引入的一种语法,使用三个连续的点(它可以在多种场合下使用,主要用途是“展开”数组或对象中的元素或属性。请注意,在合并对象时,如果有重复的键,则后面展开的对象属性会覆盖前面的。展开运算符大大简化了某些操作,并使代码更整洁和易读。原创 2024-01-08 19:23:08 · 364 阅读 · 0 评论 -
富文本编辑器
是一种用户可以使用来创建格式化的文本内容的界面组件。富文本编辑器中的文本可以包括不同的字体、字号、颜色以及可以插入图像、链接、表格和其他媒体类型。富文本编辑器可以用来增强内容创建和管理的用户体验,特别在CMS(内容管理系统)、电子邮件客户端、论坛和其他需要创建或编辑富文本内容的应用中非常有用。使用富文本编辑器,用户通常不需要了解HTML或CSS编程,即可创作出格式丰富的文本。富文本:带样式,多格式的文本,在前端一般使用标签配合内联样式实现。目标:发布文章页,富文本编辑器的集成。使用link链接js。原创 2024-01-08 16:30:00 · 490 阅读 · 0 评论 -
JS事件循环
JavaScript的事件循环是一种机制,它允许JavaScript引擎在执行异步代码时,仍然保持单线程执行环境。因为JavaScript最初是为了与用户界面交互以及操作文档对象模型(DOM)而设计的,所以处理异步事件——如用户输入、定时器、网络请求——是非常关键的。原创 2024-01-07 15:24:23 · 1102 阅读 · 0 评论 -
async和await关键字
使用可以编写出更清晰、更类似于同步代码的异步JavaScript程序。它消除了链式调用的需要,从而简化了对异步操作的控制流管理。但要记住,为了保持效率,只有在你需要等待异步操作结果的情况下才应该使用await,否则,你可能会不必要地延迟执行。原创 2024-01-07 14:45:29 · 391 阅读 · 0 评论 -
Promise
Promise是 JavaScript 中用于处理异步操作的对象。它代表了一个承诺,表示一个异步操作的最终完成结果(成功或失败),并可以使用链式的方式处理这个结果。Promise等待态(pending):初始状态,异步操作还未完成,既没有被兑现,也没有被拒绝。完成态(fulfilled):异步操作成功完成。拒绝态(rejected):异步操作失败。注意:每个 Promise 对象一旦被兑现/拒绝,那就是已敲定了,状态无法再被改变一个Promise对象在状态发生改变时,会触发相应的状态处理函数。原创 2024-01-06 17:46:58 · 982 阅读 · 0 评论 -
URLSearchParams
是一个用于处理 URL 查询字符串的实用工具类。它提供了一系列方法,允许你轻松地创建、读取、编辑查询字符串,而无需手动解析和拼接字符串。非常适合处理复杂的查询字符串。对于需要在前端应用程序中动态操作 URL 查询字符串的情况,这是一个强大且简单的 API。也常常被用来构建查询字符串。原创 2024-01-05 20:09:55 · 1060 阅读 · 0 评论 -
XMLHttpRequest
是一个 JavaScript API,它提供了一种在客户端与服务器进行数据交换的方式,可以在不刷新页面的情况下异步更新部分网页内容。事件的回调函数总是会在请求过程完成后被调用,无论请求成功还是失败。事件),因此你可以将所有 “请求结束” 相关的处理逻辑集中在一个地方。但是,如果你需要对不同的结束情况进行细致的区分处理,那么单独监听。API,因为它提供了更简洁的语法和基于 Promise 的接口。请求时代表请求已经完成,不管请求是成功了(属性中包含请求的响应内容,如果有的话。对象的事件来处理响应。原创 2024-01-05 20:05:08 · 941 阅读 · 0 评论 -
Vue CLI组件通信
组件通信,就是指组件与组件之间的数据传递组件的数据是独立的,无法直接访问其他组件的数据。想使用其他组件的数据,就需要组件通信组件关系分类有哪两种父子组件通信的流程是什么?父向子子向父组件上 注册的一些 自定义属性1.非父子组件传值借助什么?2.什么是事件总线3.发送方应该调用事件总线的哪个方法4.接收方应该调用事件总线的哪个方法5.一个组件发送数据,可不可以被多个组件接收。原创 2024-01-05 13:29:56 · 1007 阅读 · 0 评论 -
Vue CLI初识
Vue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】原创 2024-01-05 10:08:05 · 503 阅读 · 0 评论 -
FormData传送复杂数据
`FormData` 是一个用于创建表单数据对象的 JavaScript 类。它通常用于通过 JavaScript 发送表单数据,尤其是用于发送 AJAX 请求时非常有用。使用 `FormData` 可以方便地构建一个以 `multipart/form-data` 格式提交的表单数据,这允许你在发送 XMLHttpRequest 或 Fetch 请求时,以类似于表单提交的方式发送数据。原创 2023-12-28 22:11:50 · 1091 阅读 · 0 评论 -
JS本地持久化
存储的数据将以键值对的形式存储在浏览器的本地存储中,并且在浏览器关闭后仍然可用。是一个简单方便的选择。如果需要存储大量的数据,并进行复杂的查询和索引,则可以考虑使用。取决于你的具体需求。如果只是简单地存储少量的数据,并且不需要进行复杂的查询操作,需要先打开数据库,并创建事务和存储对象,然后可以使用存储对象的。要将数据持久化到本地存储中,可以使用浏览器提供的。是一种更底层的存储机制,相比于。提供了更多的功能和灵活性。原创 2023-12-27 20:06:11 · 581 阅读 · 0 评论 -
Vue.js
通过我们学习的html+css+js已经能够开发美观的页面了,但是开发的效率还有待提高,那么如何提高呢?我们先来分析下页面的组成。一个完整的html页面包括了视图和数据,数据是通过请求 从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显, 这就需要我们使用DOM操作。正因为这种开发流程,所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想,即让我们开发者更加关注数据,而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢?MVVM:其实是Mo原创 2023-12-27 19:53:38 · 987 阅读 · 0 评论 -
Ajax
Ajax是一种在Web应用中传输数据的方法,它允许在无需刷新整个页面的情况下,通过异步通信与服务器进行数据交换。这意味着可以在后台向服务器发送请求并接收响应,将数据作为JavaScript对象进行处理并根据需要更新页面的部分内容。使用Ajax,你可以在不中断用户操作的情况下更新数据,从而提供更好的用户体验和响应速度。url:请求的URL地址。method:请求的方法,如GET、POST等。data:发送到服务器的数据,可以是字符串、对象或FormData。headers。原创 2023-12-27 16:48:21 · 1449 阅读 · 0 评论 -
JavaScript解构赋值
结构赋值是一种方便的 JavaScript 语法,它允许从数组和对象中快速提取和赋值变量。通过结构赋值,你可以在一个语句中将值从数组或对象中解构出来并赋给多个变量。结构赋值是一种强大且简洁的方式,可用于从复杂的数据结构中提取所需的值并将其赋给变量。使用剩余运算符可以将剩余的数组项或对象属性保存到一个新的变量中。解构赋值还可以使用默认值,以防提取的值为 undefined。数组解构赋值允许你从数组中提取值,并将它们赋给命名变量。对象解构赋值允许你从对象中提取值,并将它们赋给命名变量。原创 2023-12-27 10:51:37 · 387 阅读 · 0 评论 -
快速获取全部表单元素
使用 form-serialize 插件,快速收集目标表单范围内表单元素的值原创 2023-12-27 10:36:25 · 1059 阅读 · 0 评论 -
JavaScript
html完成了架子,css做了美化,但是网页是死的,我们需要给他注入灵魂,所以我们需要学习JavaScript,这门语言会让我们的页面能够和用户进行交互,js可以让我们的页面更加的智能,让页面和用户进行交互。同样,js代码也是书写在html中的,那么html中如何引入js代码呢?主要通过下面的2种引入方式:第一种方式内部脚本,将JS代码定义在HTML页面中例子:第二种方式外部脚本将, JS代码定义在外部 JS文件中,然后引入到 HTML页面中例子:注意:demo.js中只有js代码,没有原创 2023-12-26 22:47:59 · 1212 阅读 · 0 评论 -
HTML5文档
(侧栏,也称为旁注)标记用来说明其所包含的内容与页面主要内容相关,但不是该页面的一部分,类似于使用括号对正文进行注释(就像这样)。括号中的内容提供关于该元素的一些附加信息,例如广告、成组的链接、侧栏等。标记用来定义公历的时间(24 小时制) 或日期,时间和时区偏移是可选的该标记能够以机器可读的方式对日期和时间进行编码。标记是一个开关式、交互式控件,用来定义用户可见的或者隐藏的需求补充细节,任何形式的内容都能被放在该标记中。或文档的页脚,包含了与页面、文章或部分内容有关的信息,例如文章的作者或者日期。原创 2023-12-22 21:43:38 · 2037 阅读 · 0 评论 -
HTTP前端请求
服务端使用了 session 技术来暂存数据。session 技术实现身份验证。可以用 telnet 程序测试。校验token,校验无误,放行。检查用户名,密码,验证通过。检查用户名,密码,验证通过。Http 无状态,有会话。jwt 技术实现身份验证。登录成功,返回token。其它请求,携带token。原创 2023-12-22 16:20:48 · 1274 阅读 · 0 评论 -
DIV+CSS页面布局
现在所有的主流的、大型的 IT 企业的网站布局几乎都采用 DIV、CSS技术,有些甚至采用 DIV、CSS、表格混合进行页面布局。此类页面布局能够实现页面内容与表现的分离,提高网站访问速度、节省宽带、改善用户的体验。DIV+CSS组合技术完全有别于传统的表格排版习惯。通过DIV+CSS实现页面元素精确控制,网站风格、代码维护与更新变得卡分容易,甚至是页面的布局结构都可以通过修改CSS属性来重新定位。DIV+CSS布局的步骤大致为: 首先整体上对页面进行分块,接着按照分块设计使用div。原创 2023-12-21 20:36:01 · 2218 阅读 · 0 评论 -
DIV与SPAN
图层是设计网页时用于定位元素或者布局的一种技术,它可以将图层里包含的内容;置到浏览器的任意位置,其包含的内容有文字、图像、动画甚至是图层。在一个网页文件中可以使用多个图层,图层可以嵌套、重叠,图层布局比表格的布局更加灵活。原创 2023-12-20 20:42:58 · 1387 阅读 · 0 评论 -
CSS基础
CSS(级联样式标) 控制页面是通过 CSS 规则实现的,CSS 规则由选择器和声明组成,声明由属性和属性值对组成。CSS 提供了丰富的选择器类型,包括标记选择器、类选择器、id 选择器伪类选择器及属性选择器等,能够灵活地对整个页面、页面中的某个标记或一类标记进行样式设置。原创 2023-12-19 22:13:08 · 1422 阅读 · 0 评论 -
HTML基础
在前端代码中,是一个特殊的 HTML 实体编码,它代表着一个不断开的空格(non-breaking space)。实际上,是 Non-Breaking Space 字符的字符实体引用。通常情况下,HTML 中的连续空格会被合并成一个空格,而使用可以插入多个连续的不断开的空格。这对于需要保持连续空格的特殊排版需求非常有用,比如在文本对齐、制作表格或生成固定宽度的布局时。例如,如果你想在 HTML 中插入 5 个连续的空格,你可以使用以下代码:在浏览器渲染时,会被解析为一个不断开的空格,确保这些空格不会被合并原创 2023-12-18 23:14:59 · 1158 阅读 · 0 评论