自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(87)
  • 收藏
  • 关注

原创 【Vue2】ref 引用

② 当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用,并调用原生 DOM 对象的.focus() 方法即可。通俗的理解是:等组件的DOM 更新完成之后,再执行 cb 回调函数。每个 vue 的组件实例上,默认都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。,需要拿到页面上某个DOM元素的引用,此时可以使用ref引用。② Vue中,也可以使用ref 引用页面上的。

2023-02-04 20:12:50 2551

原创 【Vue】模板语法——内置指令

指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。vue 中的指令按照不同的用途可以分为如下几大类:① 内容渲染指令:v-text、v-html② 属性绑定指令:v-bind③ 事件绑定指令:v-on④ 双向绑定指令:v-model⑤ 条件渲染指令:v-if、v-show⑥ 列表渲染指令:v-for⑦ 其他指令:v-once、v-pre、v-cloak注意:在vue中使用v-开头的都是Vue指令。

2023-02-03 20:14:49 1641 1

原创 【Vue】Vue不同版本的基本使用

vue2.x 中绝大多数的 API 与特性,在 vue3.x 中同样支持。2.多个容器不能对应一个实例,实例只会找到第一个对应的容器;一个容器不能对应多个实例,只有第一个实例能找到对应的容器。所以,容器和实例只能。的功能例如:组合式 API、多根节点组件、更好的 TypeScript 支持等。的旧功能如下:过滤器、不再支持 $on,$off 和 $once 实例方法等。1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象。vue cli(vue脚手架)、vite(新一代的架构工具)。

2023-02-02 22:05:32 1057

原创 【Vue】模板语法——文本插值

在底层机制中,Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统,当应用状态变更时,Vue 能够智能地推导出需要重新渲染的组件的最少数量,并应用最少的 DOM 操作。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。这种 {{ }} 语法的专业名称是插值表达式(英文名为:Mustache),在实际开发中用的最多。在 vue 提供的模板渲染语法中,除了支持绑定简单的数据值之外,还。只是内容的占位符,不会覆盖原有的内容。

2023-02-01 19:03:03 1526

原创 【Vue】Vue的简介和特性

Vue.js可以说是MVVM架构的最佳实践,是一个JavaScript MVVM库,是一套构建用户界面的渐进式前端框架。专注于MVVM中的ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API简洁。1. 构建用户界面前端开发者最主要的工作,就是为网站的使用者(又称为:网站的用户)构建出美观、舒适、好用的网页。

2023-01-31 15:16:13 2108

原创 【Vue】vue-devtools调试工具安装和配置

在浏览器中访问一个使用了 vue 的页面,打开浏览器的开发者工具,切换到 Vue 面板,即可使用 vue-devtools 调试当前的页面。vue 官方提供的 vue-devtools 调试工具,能够方便开发者对 vue 项目进行调试与开发。2. 配置 Chrome 浏览器中的 vue-devtools。3. 使用 vue-devtools 调试 vue 页面。1. 安装 vue-devtools 调试工具。修改完配置项,须重启浏览器才能生效!

2023-01-30 20:30:14 924

原创 【Vue】前端工程化与 webpack

在实际开发过程中,webpack 默认只能打包处理以 .js后缀名结尾的模块。其他非 .js 后缀名结尾的模块,webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错。loader 加载器的作用:协助 webpack 打包处理特定的文件模块。比如:css-loader 可以打包处理 .css 相关的文件less-loader 可以打包处理 .less 相关的文件。

2023-01-29 22:29:17 742

原创 【ESLint】ESLint的安装配置及vscode插件

ESLint是可组装的JavaScript和JSX检查工具。工作中常用,所以最好有所了解。ESLint - Pluggable JavaScript linter - ESLint中文ESLint// ESLint 插件的配置},

2023-01-28 08:37:00 3622 2

原创 【axios】axios在vue中的使用

文件中进行如下配置:把 axios 挂载到 Vue.prototype 上,供每个 .vue 组件的实例直接使用,之后的vue组件中都不需要再单独导入axios,可以直接调用 this.$http.xxx。文件全局配置 axios 的请求根路径,在vue组件的URL中就不需要再写完整的请求地址。按照之前的写法,如果URL发生更改,那么需要将每个vue组件中的URL都进行修改。如果把 axios 挂载到 Vue 原型上,无法实现 API 接口的复用。上面的方法,需要在每个组件中都导入axios,太麻烦。

2023-01-27 11:53:07 848

原创 【axios】axios的基础知识和使用

相比于 jQuery,axios 更加轻量化,不能操作DOM元素,只专注于网络数据请求。相比于原生的 XMLHttpRequest 对象,axios 简单易用。axios在请求到数据之后,在真正的数据(data)之外,套了一层壳。// 调用 axios 方法得到的返回值是Promise对象。method: '请求的类型',url: '请求的 URL地址'method: '请求的类型',url: '请求的 URL地址',不能操作DOM元素。

2023-01-26 19:48:29 1309

原创 【Ajax】HTTP超文本传输协议

什么是通信通信,就是信息的传递和交换。通信三要素:通信的主体通信的内容通信的方式通信协议(Communication Protocol)是指通信的双方完成通信所必须遵守的规则和约定。通俗的理解:通信双方采用约定好的格式来发送和接收消息,这种事先约定好的通信格式,就叫做通信协议。HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ,它规定了客户端与服务器之间进行网页内容传输时,所必须遵守的传输格式。

2023-01-25 08:39:59 526

原创 【Ajax】防抖和节流

举例:高铁卫生间是否被占用,由红绿灯控制,红灯表示被占用,绿灯表示可使用。用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源;防抖策略(debounce)是当事件被触发后,延迟 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费 CPU 资源。如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件!

2023-01-24 07:15:00 1357

原创 【Ajax】同源策略、跨域和JSONP

同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。MDN 官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互,例如:无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB无法接触非同源网页的 DOM。

2023-01-23 09:30:00 1349

原创 【Ajax】XMLHttpRequest和Level2

查询字符串(URL 参数)是指在 URL 的末尾加上用于向服务器发送信息的字符串(变量)。将英文的?放在URL 的末尾,然后再加上参数=值,想加上多个参数的话,使用符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到 URL 中。// 不带参数的 URL 地址// 带一个参数的 URL 地址id=1// 带两个参数的 URL 地址西游记URL 地址中,只允许出现英文相关的字母、标点符号、数字,因此,在 URL 地址中不允许出现中文字符。

2023-01-22 08:45:00 1658

原创 【Ajax】了解Ajax与jQuery中的Ajax

相比于 $.get() 和 $.post() 函数,jQuery 中提供的 $.ajax() 函数,是一个功能比较综合的函数,它允许我们对 Ajax 请求进行更详细的配置。jQuery 中 $.get() 函数的功能单一,专门用来发起 get 请求,从而将服务器上的资源。之前所学的技术,只能把网页做的更美观漂亮,或添加一些动画效果,但是,Ajax能让我们轻松实现。数据的添加、删除、修改、查询操作,都需要通过 ajax 的形式,来实现数据的交互。使用 $.ajax() 发起 GET 请求时,只需要将。

2023-01-21 08:00:00 2022

原创 【Ajax】数据交换格式XML 和 JSON

通知

2023-01-20 08:00:00 1542

原创 【Ajax】模板引擎

姓名:{{name}}年龄:{{ age }}性别:{{ gender}}住址:{{address }}

2023-01-19 15:30:00 1545

原创 【Ajax】form表单

通过点击 submit 按钮,触发表单提交的操作,从而使页面跳转到 action URL 的行为,叫做表单的同步提交。

2023-01-19 08:00:00 1510

原创 【Ajax】接口与接口测试工具PostMan

为了验证接口能否被正常被访问,我们常常需要使用接口测试工具,来对数据接口进行检测。好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试。接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。

2023-01-18 14:30:00 2570

原创 【Ajax】服务器的基本概念

为了验证接口能否被正常被访问,我们常常需要使用接口测试工具,来对数据接口进行检测。好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试。接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。

2023-01-18 08:04:31 456

原创 【jQuery】实现文件上传和loading效果

上传

2023-01-17 08:00:00 728

原创 【jQuery】jQuery其他方法

jQuery 使用 $ 作为标示符,随着 jQuery 的流行,其他 js 库也会用这 $ 作为标识符, 这样一起使用会引起冲突。bootstrap 框架也是依赖于 jQuery 开发的,因此里面的 js 插件使用 ,也必须引入 jQuery 文件。这些插件也是依赖于 jQuery 来完成的,所以必须要先引入 jQuery 文件,因此也称为 jQuery 插件。需要一个解决方案,让 jQuery 和其他的 js 库不存在冲突,可以同时存在,这就叫做。(拷贝的对象,而不是地址),修改目标对象。

2023-01-16 08:00:00 224

原创 【jQuery】jQuery事件

我是动态创建的p

2023-01-15 08:00:00 1118

原创 【jQuery】常用API——尺寸、位置操作

一、jQuery 尺寸以上参数为空,则是获取相应值,返回的是数字型。如果参数为数字,则是修改相应值。参数可以不必写单位。

2023-01-14 09:20:37 588

原创 【jQuery】常用API——jQuery元素操作

jQuery元素操作主要是遍历、创建、添加、删除元素操作。

2023-01-13 11:56:03 317

原创 【jQuery】常用API——jQuery内容文本值

要针对元素的内容还有表单的值操作。html();html('内容');

2023-01-12 07:38:24 293

原创 【jQuery】常用API——jQuery属性操作

用户自己给元素添加的属性,我们称为自定义属性。比如给 div 添加 index =“1”。

2023-01-11 08:10:59 183

原创 【jQuery】常用API——jQuery效果

jQuery 给我们封装了很多动画效果,最为常见的如下:显示参数:(1)参数都可以省略, 无动画直接显示。(2)speed:三种预定速度之一的字符串( “slow”,“normal", or “fast” )或表示动画时长的毫秒数值(如:1000)。 (3)easing:(Optional) 用来指定切换效果,默认是 “swing”,可用参数 “linear” 。(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。隐藏参数:(1)参数都可以省略, 无动画直接显示。(2)speed:三种预定速度之

2023-01-10 07:27:48 466

原创 【jQuery】常用API——jQuery样式操作

2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号。3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号。jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。作用等同于以前的 classList,可以操作类样式,修改。3. 切换类:如果没有类名,就添加;注意操作类里面的参数不要加点。原生 JS 中 className 会。1. 参数只写属性名,则是返回属性值。元素原先里面的类名。

2023-01-09 09:06:31 249

原创 【jQuery】常用API——jQuery选择器

原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使荻取元素统一标准。想要多选一的效果——排他思想:当前元素设置样式,其余的兄弟元素清除样式。遍历内部 DOM元素(伪数组形式存储)的过程。$('div').css('属性','值')链式编程是为了节省代码量,看起来更优雅。使用链式编程一定注意是哪个对象执行样式。,简化我们的操作,方便我们调用。简单理解∶给匹配到的。

2023-01-08 11:39:47 335

原创 【jQuery】jQuery基础概念

从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。这些库都是对原生JavaScript的封装,内部都是用JavaScript实现的,我们主要学习的是jQuery,jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。,其设计的宗旨是“wrilte Less , Do More”,即倡导写更少的代码,做更多的事情。,我们可以快速的查询使用里面的功能。

2023-01-07 09:53:57 7787

原创 【Bootstrap】可复用的组件

一、字体图标二、下拉菜单三、按钮组四、输入框组

2023-01-04 08:02:30 538

原创 【Bootstrap】CSS全局样式

一、HTML5文档类型二、移动设备优先三、禁用移动设备上的缩放功能四、布局容器五、标题六、页面主体七、文本八、列表九、表格十、表单十一、按钮十二、图片十三、辅助类十四、栅格系统

2023-01-03 20:23:39 2085

原创 【Bootstrap】基础知识和环境配置

一、Bootstrap基础1. 概念2. 特点3. 组成3.1 基本结构3.2丰富的CSS样式库3.3布局组件3.4插件二、bootstrap的环境配置1. 在页面中引入本地文件2. 使用CDN加速器

2023-01-02 11:19:06 1120

原创 【JavaScript】数组和二维数组

一、数组1. 概念2. 创建数组2.1 使用'[]'创建2.2 使用 'new Array'创建3. 数组的属性4.数组元素的访问5.示例6.for...in循环7. for...of循环8. forEach循环二、二维数组1. 概念2. 二维数组的创建2.1使用'[]'2.2使用'new Array'3. 二维数组元素的访问4. 例题

2022-12-07 18:39:53 2626

原创 【JavaScript】分支结构和循环结构

一、流程控制二、分支结构1. if语句2. if…else语句3. if…else if语句4. switch语句5.条件表达式构成的选择结构三、循环结构1.while循环2.do-while循环3. for循环3.1 for循环转换为while循环3.2 断点调试4. 循环嵌套

2022-12-05 09:41:14 670

原创 【JavaScript】运算符及其优先级

运算符可以快速地对变量的值进行递增和递减操作,它属于一元运算符,只对一个表达式进行操作。(一元运算符):参与运算的对象只有一个,并运算符必须出现在运算对象的左边。用来对数据进行二进制运算,将参与运算的操作数视为由二进制(0和1)组成的32位的串。赋值运算符用于将运算符右边的值赋给左边的变量,常用的赋值运算符及示例见下表。在实际开发中,逻辑运算符经常用于多个条件的判断,常用的逻辑运算符见下表。单目运算符,若a为false,结果为true,否则相反。a和b都为true,结果为true,否则为false。

2022-11-08 16:21:32 2527

原创 【JS数据结构】双向链表

一. 认识双向链表1.单向链表1.1 概念1.2 实现的原理1.3 缺点2.双向链表2.1 概念2.2 实现的原理2.3 缺点2.4 双向连接的特点图解二.双向链表的创建1.创建一个双向链表的类2.双向链表的常见操作2.1append(element)尾部追加数据2.2 将链表转成字符串形式2.3 insert(position, element)任意位置插入2.4 get(position)获取对应位置的元素2.5 indexOf(el

2022-10-25 20:03:31 822

原创 【操作系统】操作系统的概念、功能和目标

一、熟悉的操作系统二、操作系统的概念和定义1.结合生活经验来理解计算机系统的层次结构2.操作系统三、操作系统的功能和目标1.作为系统资源的管理者1.1 提供的功能1.2 目标2.作为用户和计算机硬件之间的接口2.1 提供的功能(统称为“用户接口”)2.2 目标3.作为最接近硬件的层次3.1 提供的功能3.2 目标

2022-10-19 09:18:15 758

原创 【JS数据结构】单向链表

一. 认识链表1.数组1.1 数组的优点1.2 数组的缺点2.链表2.1 相对于数组, 链表有一些优点2.2 相对于数组, 链表有一些缺点3.什么是链表3.1 链表的火车结构3.2 链表的数据结构3.3 给火车加上数据后的结构二. 链表封装1.创建链表类1.1 创建一个链表类1.2 代码解析2.链表常见操作2.1append(element)尾部追加数据2.2 toString()转成字符串2.3 insert(position

2022-10-18 23:18:26 569

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除