- 博客(76)
- 收藏
- 关注
RSS订阅原创 el-form 校验数组的每个元素
当表单的属性为数组时，该怎么校验数组元素的每一项呢？效果图：vue 代码<template> <div style="width: 500px"> <el-form :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm" > <el-form-item label="书籍推荐" prop="bookR
2022-01-12 18:00:06
4844
原创 VSCode插件，TODO标记
VSCode插件推荐： Todo Tree、TODO Height在商店中搜索并安装：使用：默认情况下TODO: ，FIXME: 为高亮提醒的关键字，还可以自定义关键字自定义关键字：在vscode配置文件中设置4. 点击下面这个树一样的标记，就可以找到todo标记过的所有文件，点击就可以直接跳转到被标记的文件啦...
2022-01-11 14:22:30
7887
原创 Vue slot插槽的使用
为什么使用slot生活中：插槽的目的是让我们原来的设备具备更多的扩展性比如电脑的USB, 我们可以插入U盘，硬盘、手机、音响、鼠标、键盘等等组件的插槽：也是为了让我们封装的组件更加具有扩展性让使用者可以决定组件内部的一些内容到底展示什么插槽的基本使用显示效果：具名插槽的使用：需求：封装一个导航栏组件，左边、中间、右边都可根据需求显示不同的东西实现：<!-- 定义 --><template id="cpn"> <div>
2021-01-26 15:21:55
604
原创 Vue双向绑定实现原理及代码实现(超详细)
Vue双向绑定实现原理及代码实现原理：Vue采用数据劫持结合发布者-订阅者模式的方法，通过Object.defineProperty()来劫持各个属性的setter,getter属性在数据变动的时候，通知订阅者，触发更新回调函数，重新渲染视图数据劫持（Object.defineProperty）当Vue实例上的 data 中的数据改变时，对应的视图所用到的 data中数据也会在页面改变。所以我们需要给 data 中的所有的数据设置一个监听器，监听 data 的改变和获取一但数据改变，监
2021-01-22 15:49:44
1253
原创 防抖节流
防抖节流认识防抖节流JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。而对于某些频繁的事件处理会造成性能的损耗，可以通过防抖和节流来限制事件频繁发生为什么需要防抖节流为什么需要防抖？举个例子：比如想要搜索一个MacBook：当输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；当继续输入ma时，再次发送网络请求；那么macbook一共需要发送7次网络请求；这大大损耗我们整个系统的性能，无论是前端的事
2021-01-20 15:14:19
283
2
原创 JavaScript深浅拷贝
深浅拷贝什么是深浅拷贝？深浅拷贝是只针对Object和Array这样的引用数据类型的浅拷贝：只进行一层关系的拷贝，如果属性是基本类型，直接拷贝基本类型的值，如果属性值是内存地址，就拷贝这个地址，新旧对象公用一块内存深拷贝：进行无限层次的拷贝，会创造一个一摸一样的对象，不共享内存，修改对象不会互相影响为什么要进行深浅拷贝？let arr1 = arr2 = [1,2,3]let obj1 = obj2 = {a:1, b:2, c:3}arr1[0] = 2obj1.a = 2cons
2021-01-20 12:27:22
107
原创 前端面试——JS进阶
JS进阶1. ES6 基础知识点变量提升问：什么是变量提升？为什么存在变量提升函数及变量的声明都将被提升到函数的最顶部。也就是变量可以先使用再声明。变量提升的根本原因就是为了解决函数之间互相调用的情况。问：变量和函数怎么进行提升的？ 优先级是怎么样的？第一阶段：对所有的函数声明进行提升(忽略表达式和箭头函数)，引用类型的赋值分为三步：开辟堆空间存储内容将地址赋值给变量第二阶段：对所有的变量进行提升，全部赋值为undefined，然后依次顺序执行代码(let和cons
2021-01-20 09:54:48
1983
6
原创 前端面试——JS基础
1 数据类型原始类型StringNumberBooleannullundefinedSymbol引用类型ObjectArrayDateRegExpSymbol问：说说JavaScript中的基本类型有哪些？以及各个数据类型是如何存储的？堆栈池内存栈：存放变量堆：存放复杂对象池：存放常量栈和堆是两种基本的数据结构。栈在内存中自动分配内存空间，堆在内存中动态分配内存空间，不一定会自动释放，在项目中将对象类型手动置为null, 是为了减少无用内存消耗。2 类
2021-01-11 16:01:45
219
原创 改变this指向-call、apply、bind的内部实现
改变this指向-call、apply、bind的内部实现手写call // call 的内部实现 Function.prototype.myCall = function(context) { // 判断调用者是否为函数 if(typeof this !== 'function') { throw new TypeError('Error') } // 不传参默认为 window context = conte
2021-01-07 11:18:26
91
原创 前端面试——HTML5 新特性总结
三 HTML5 新特性总结1. 视频和音频1.1 视频今天，大多数的视频是通过插件(比如Flash) 来显示的，然而并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。视频格式video元素支持三种视频格式：OggMPEG 4WebM使用方式<video src="movie.ogg" controls="controls"></video><video> 标签的属性<video
2020-12-24 15:43:22
385
1
原创 前端面试——css篇
css篇1. link 和 @import的区别本质上，这两种方式都是为了加载css文件，但还是存在细微的差别link属于XHTML标签，而@import 完全是css 提供的一种方式。link标签除了加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS加载顺序的差别。当一个页面被加载的时候, link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。兼容性的差别。由于@import是CSS2.1提出的所以老
2020-12-24 15:35:23
203
原创 前端面试——HTML，HTTP, Web基础篇
一 HTML，HTTP, Web基础篇1. h5 新特性1.1 DOCTYPE有什么用？标准模式与混杂模式如何区分？它们有何意义？告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式(Standards mode) 以浏览器支持的最高标准运行；混杂模式（Quirks mode)中页面是一种比较宽松的向后兼容的方式显示。1.2 严格模式与混杂模式的语句解析不同点有哪些1）盒模型的高宽包含内边距padding和边框bor
2020-12-24 15:12:53
274
原创 Vue CLI、Vue Router、Vuex的使用
Vue CLI、Vue Router、Vuex的使用1. vue-cli(vue脚手架)创建项目1.1 关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。1.2 Node 版本要求Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10
2020-11-18 11:21:03
535
原创 Vuex核心概念
Vuex核心概念vuex的五个核心概念1. StateState单一状态树Vuex提出使用单一状态树，什么是单一状态树呢？英文名称是：Single Source of Truth,也可以翻译成单一数据源也就是只能有一个Store对象,如果将状态信息保存在多个Store对象，之后管理会变得很困难单一状态树能够让我们用最直接的方式($store.state)找到某个状态的片段，而且便于之后的维护和调试2. Getters2.1 Getters基本使用有时候，我们需要从sto
2020-10-12 17:24:37
196
原创 Vue学习(三)—使用脚手架创建工程
Vue学习—2020/8/20传统工程问题兼容性问题使用模块化会导致JS文件增加，从而导致传输文件数增加直接使用原始代码会导致文件体积过大使用第三方库很不方便搜索下载引用js(某些第三方库可能没有ES6模块化版本)vue模板书写在字符串中，没有智能提示，没有代码着色难以把样式代码集成到vue组件中其他诸多细节问题…这些问题的本质是：开发的代码和运行的代码要求不同所以我们需要一个工具，然后通过这个工具转换后，得到一个最合适运行的代码在vue中，这个工具就是vue-cli
2020-08-20 10:25:15
191
原创 JavaScript核心—DOM（一）
1. Web APIs 和 JS基础的关联性1.1 JS 组成ECMAScript：JavaScript语法DOM：文档对象模型BOM：浏览器对象模型1.2 JS 基础阶段以及Web APIs阶段JS基础阶段学习ECMAScript标准规定的基本语法只学习语法做不了常用的网页交互效果JS基础是铺垫Web APIs阶段Web APIs 是W3C组织的标准主要学习DO...
2020-08-19 16:39:28
194
原创 Vue学习(二）—组件核心概念
Vue学习—2020/8/19总结ES6知识补充ES6模块化没有模块化的影响：全局变量污染、难以管理的依赖常见的标准化标准：CommonJS、 ES6 Moudule、AMD、CMD、UMD…导出的几种方式：// 默认导出 {default: fn}， 函数可以是匿名函数export default function (a, b) { return a + b;}// 具名导出(普通导出)，一个js文件只能有一个默认导出，可以有多个普通导出// 普通导出, { double
2020-08-19 16:37:21
115
原创 Vue学习(一)—Vue核心概念
Vue学习—2020/8/18总结ES6知识补充速写属性var name = "abc";var age = 18;var obj = { // 速写属性，当对象中的属性值来自于一个变量，可以简写为如下方式，等价于：name:name,age:age name, age}速写方法var obj = { name:"abc", // 速写方法，等价于sayHi:function() {...} sayHi() { con
2020-08-19 16:35:48
208
原创 ES5中的新增方法
1. 数组方法迭代(遍历)方法：forEach()、map()、filter()、some()、every()array.forEach(function(currentValue, index, arr))forEach() 用于遍历数组currentValue：数组当前项的值index：数组当前项的索引arr：数组对象本身 var arr = [1, 2, 3]; var sum = 0; arr.forEach(function(value, index, arr
2020-07-09 11:17:05
81
原创 ES6—类
1. 构造函数和原型1.1 概述在典型的OOP的语言中(如Java),都存在类的概念，类就是对象的模板，对象就是类的实例，但在ES6之前，JS并没有引入类的概念。ES6，全称ECMAScript 6.0，2015.06发版。在ES6之前，对象不是基于类创建的，而是用一种称为构造函数的特殊函数来定义它们的特征。创建对象可以通过以下三种方式：对象字面量new Object()自定义构造函数 // 1.利用new Object() 创建对象 var obj1 = new Objec
2020-07-06 15:53:26
174
原创 ES6中的类和对象
1. 面向对象编程介绍1.1 两大编程思想面向过程面向对象1.2 面向过程编程 POP(Process-oriented programming)面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。1.3 面向对象 OOP(Object Oriented Programming)面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。优点：灵活、代码可复用、容易维护和开发，适合多人合作的大型软件项目。特性：封装性、继
2020-07-05 11:58:41
88
原创 媒体查询+rem实现元素动态大小变化
1.rem 基础rem 单位rem(root em)是一个相对单位。类似于em, em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以实现整体控制。2. 媒体查询2.1 什么是媒体查询媒体查询(Media Query) 是CSS3新语法。使用@media查询，可以针对不同的
2020-07-05 11:48:47
1215
原创 Less 基础
1. 维护CSS的弊端CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。不方便维护及扩展，不利于复用。CSS没有很好的计算能力非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目2. Less介绍Less(Leaner Style Sheets 的缩写) 是一门CSS扩展语言，也称为CSS预处理器。作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的C
2020-07-01 13:20:54
225
2
原创 GET请求和POST请求
1. 可以通过form标签的method属性指定发送请求的类型2. 如果是get请求会将提交的数据拼接到URL后面3. 如果是post请求会将提交的数据放到请求头中4. GET请求和POST请求的异同相同点都是将数据提交到远程服务器不同点提交数据存储的位置不同GET会将数据放到URL后面POST请求会将数据放到请求头中提交数据大小限制不同GET请求对数据有大小限制POST请求对数据没有大小限制5. GET/POST请求应用场景GET请求用于提交非敏感数据和小数据
2020-06-27 11:37:07
108
原创 PHP 基础语法
1. 如何运行编写好的PHP文件？因为php是服务端编程语言，所以要在服务器端运行php文件名称不能有中文php文件必须放到服务器文件夹下通过ip找到服务器文件夹，选中php文件访问2. 服务端返回浏览器的是什么？php程序的执行结果注意：执行结果中有中文，必须在php文件顶部设置header("content-type:text/html;charset=utf-8");3. php基础语法注释：与JS一致定义变量：$num=10;打印内容：echo $num;
2020-06-27 10:57:54
80
原创 jQuery 对象拷贝
jQuery 对象拷贝如果想要把某个对象拷贝(合并) 给另一个对象使用， 此时可以使用$.extend()方法语法：$.extend([deep],target,object1,[objectN])deep：如果设为true为深拷贝，默认为false 浅拷贝target：Object类型 目标对象，其它对象的成员属性将被附加到该对象上object1：可选，Object类型 第一个被合并的对象。objectN: 可选，Object类型 第N个被合并的对象。浅拷贝是把被拷贝对象复杂数据类型中
2020-05-19 17:32:02
272
1
原创 jQuery事件
1. jQuery 事件注册单个事件注册语法：element.事件(function() {})$("div").click(function(){ 事件处理程序})其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等$("div").click(function() { $(this).css("background","purple");})$("div").mouseente
2020-05-19 17:00:46
95
原创 flex布局
flex布局两个概念：1.开启了flex布局的元素叫 flex container2.flex container 里面的直接子元素叫做 flex items3.开启flex布局： display: flex / inline-flexflex：flex container 以block-level形式存在inline-flex：flex container 以inline-leve...
2020-05-12 17:12:51
135
原创 jQuery尺寸、位置操作
1 jQuery 尺寸以上参数为空，则是获取相应值，返回的是数字型如果参数为数字，则是修改相应值参数可以不必写单位 <style> div { width: 200px; height: 200px; background-color: pink; padding: 10px; border: 15px...
2020-04-23 16:41:02
182
原创 jQuery 对DOM元素的遍历，创建，添加和删除
1 遍历元素jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。语法1：$("div").each(function(index,domEle) {xxx;})each() 方法遍历匹配的每一个元素。主要用DOM处理。里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jquery对象所以要想...
2020-04-22 22:03:54
1733
原创 jQuery 获取和设置文本内容的方法
jQuery 内容文本值主要针对元素的内容还有表单的值操作。1. 普通元素内容html() 相当于原生（innerHTML）html() //获取元素的内容(包含标签)$("div").html();//<div>123</div>html("内容") // 设置元素的内容$("div").hrml("<strong>123</strong&...
2020-04-22 20:43:03
1119
原创 jQuery对元素属性的操作
jQuery属性操作1 设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href, input元素里的type.1. 获取属性语法element.prop("属性名")2. 设置属性语法prop("属性","属性值")$("a").prop("title","111");$("input").change(functio...
2020-04-22 20:31:46
221
原创 jQuery动画效果的实现
jQuery效果jQuery给我们封装了很多动画效果，最常见的如下：显示与隐藏：show()、hide()、toggle()滑动：slideDown()、slideUp()、slideToggle()淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo()自定义动画：animate()1 显示隐藏效果1. 语法show([speed],[easin...
2020-04-22 20:30:26
896
原创 jQuery 对元素样式的操作
1 操作css方法jQuery可以使用css()方法来修改简单元素样式；也可以操作类，修改多个样式。参数只写属性名，则是返回属性值$(this).css("color");参数是（属性名，属性值）逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不带单位和引号$(this).css("color","red")参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号...
2020-04-22 20:28:53
261
原创 jQuery 选择器的使用，jqueryt特点隐式迭代和链式编程
1. jQuery 选择器1.1 jQuery 基础选择器原生JS获取元素的方式很多，很杂，而且兼容性情况不一致，因此jQuery做了封装，使获取元素统一标准。$("选择器") //里面直接写CSS选择器即可，但是要加引号1.2 隐式迭代遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。简单理解：给匹配的所有元素进行循环遍历，执行相应的方法，不用我们自己写循环操作，简化了我们...
2020-04-22 20:27:31
254
原创 什么是jQuery，jQuery对象和DOM对象有什么区别
1.jQuery概述1.1 JavaScript 库JavaScript库：即library,是一个封装好的特定集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show,比如获取元素等。简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。...
2020-04-18 17:41:06
316
原创 HTML5和CSS3新特性（常用）
1. HTML5新特性HTML5的新特性主要针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本都是IE9以上版本才支持，如果不考虑兼容性问题，才可以使用这些新特性。1.1 HTML5 新增的语义化标签以前布局，基本都是用div来做。但是div对于搜索引擎来说，是没有语义的。<header>:头部标签<nav>：导航标签...
2020-04-18 16:32:12
502
原创 轮播图制作，详细步骤及 HTML+CSS+JS 完整代码
1.轮播图的结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
2020-04-05 12:55:27
58647
24
原创 动画函数
1 动画实现原理**核心原理：**通过定时器setInterval()不断移动盒子位置。实现步骤：获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器条件注意此元素需要添加定位，才能使用element.style.left// 1. 获得盒子当前位置 div.offsetLeft// 2. 使用div.style.left更改盒子的位置...
2020-04-05 10:09:43
564
原创 mouseenter和mouseover的区别
mouseenter鼠标事件当鼠标移动到元素上时就会触发mouseenter事件类似mouseover,两者区别是mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发。原因是：mouseenter不会冒泡跟mouseenter搭配的鼠标离开事件 mouseleave同样不会冒泡<div class="father"> ...
2020-04-04 21:47:48
247
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人