- 博客(58)
- 收藏
- 关注
RSS订阅原创 vue插槽
什么是插槽插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。具名插槽具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。1. 子组件的代码，设置了两个插槽(header和footer)：2. 父组
2022-01-07 22:34:05
449
原创 vue组件
一、什么是组件拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块二、功能模块模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一。组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。三、全局组件定义的三种方式方式一<div id='app'> <!-- 组件名当作标签使用 --> <login></login> </di
2022-01-07 22:13:03
509
原创 axios的使用
GET请求axios .get('https://www.runoob.com/try/ajax/json_demo.json') .then(response => (this.info = response)) .catch(function (error) { // 请求失败处理 console.log(error);});POST请求axios .post('https://www.runoob.com/try/a
2022-01-06 22:40:33
455
原创 vue生命周期
beforeCreate第一个生命周期，vue实例刚创建，但是data数据未挂载，拿不到数据一般用于重定向created如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作一般用于接口请求和数据初始化beforeMount模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中，只是之前写的一些模板字符串mounted内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了注意： mounted 是 实例
2022-01-06 22:29:47
465
原创 键盘修饰符
一.注册一个监听按键事件 监听所有按键：v-on:keyup 监听指定按键：v-on:keyup.按键码 二.使用按键别名 为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right <input type="text" @keyup.enter="log1">me...
2022-01-05 22:36:11
264
原创 vue过滤器
概念：可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></d...
2022-01-05 22:28:08
1832
原创 vue基础
一. 什么是vue渐进式框架（轻量级）Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！二.vue的优点提高开发效率；减少不必要的DOM操作；提高渲染效率；让程序员可以更多的时间去关注业务逻辑；三.框架和库的区别框架：是一套完整的解决方案；对项目的侵入性较大库（插件）：提供某一个小功能，对项目的侵入性较小四.Vue.js的代码结构1.引入vue.js2.写视图层，我们要展示的内容3.实例化Vue()
2022-01-04 21:41:55
259
原创 ES6的Promise对象
作用：Promise对象能使我们更合理、更规范地进行处理异步操作。传统写法的缺点：1. 如果存在多个请求操作层层依赖的话，那么以上的嵌套就有可能不止三层那么少了，加上每一层还会有复杂的业务逻辑处理，代码可读性也越来越差，不直观，调试起来也不方便。如果多人开发的时候没有足够的沟通协商，大家的代码风格不一致的话，更是雪上加霜，给后面的维护带来极大的不便。2. 如果请求C的需要依赖A和B的结果，但是请求A和B缺互相独立，没有依赖关系，以上的实现方式，就使得B必须得到A请求完成后才可以执行，无疑是消..
2021-12-23 22:02:58
525
原创 Set 和 WeakSet用法
Set结构Set是ES6给开发者带来的一种新的数据结构，你可以理解为值的集合。注意：它的值不会有重复项。1.利用set进行数组去重：var x = new Set([1,2,4,2,3,3,1,2])console.log(x);var arr = [1,2,6,2,9,1,5,4,5]var s = new Set(arr)console.log(s);2.size属性作用：获取成员的个数。let s = new Set([1,2,3,4]);s.size;
2021-12-23 21:25:30
578
原创 for…of的使用
for…of的作用for...of一种用于遍历数据结构的方法。它可遍历的对象包括数组，字符串，set和map结构等具有iterator 接口的数据结构。for...of的实现var arr =[1,2,3,4,5];for(let value of arr){ consoLe.log(value);}//打印结果:依次输出:1 2 3 4 5for...of的优点：1.写法比for循环简洁很多；2.可以用break来终止整个循环，或者continute来跳出当前循环，.
2021-12-22 22:43:23
1066
原创 ES6之箭头函数
ES6标准新增了一种新的函数：ArrowFunction（箭头函数）。ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式基本特点(1).箭头函数this为父作用域的this，不是调用时的this箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。(2).箭头函数不能作为构造函数，不能使用new(3).箭头函数没有arguments，caller，callee注意(1).箭头函数通过call和a...
2021-12-21 23:17:33
146
原创 rest参数
表示法：...values（三个点+变量名）作用：用于获取函数的多余参数注意：values是一个数组eg：正确写法，rest参数比寻写在最后function demo2 (a,b,c,...values){ console.log(values);}demo2(1,2,3,4,5,6,7,8,9)扩展运算符它一般结合数组使用，把数组的元素用逗号分隔开来，组成一个序列。1.遍历数组var arr1 = [1,2,3,4,5,6,7,8]console.log(
2021-12-21 23:00:00
102
原创 ES6初识
一.什么是ES6ES6是ECMAScript 6 的简称，ECMAScript就是JavaScript中的语法规范。二.let关键字let声明的变量仅仅在自己的块级作用域起作用，出了这个块级作用域就不起作用。var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部，不在函数内即在全局作用域的最顶部。这就导致了在使用var声明变量时，由于变量提升和作用域的原因，在很多情况下就会引起一些误解。这也是var的不足之处，而let就没有这方面的问题。注意：1....
2021-12-20 22:27:46
84
原创 jQuery基础
jQuery事件1、单击事件$("button").click(function(){//动作触发后执行的代码!!});2、双击事件$("button").dblclick(function(){//动作触发后执行的代码!!});3、鼠标进入$("#p1").mouseenter(function(){alert('您的鼠标移到了id="p1"的元素上!');});4、鼠标离开$("#p1").mouseleave(function(){alert('您
2021-12-15 22:36:30
784
原创 jQuery选择器
基本选择器1.ID选择器获取指定ID的元素用法：$(“#id”);2.类选择器获取同一类class的元素用法：$(“.class”);3.标签选择器获取同一类标签的所有元素用法：$(“div”);4.并集选择器使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素用法：$(“div,p,li”);5.交集选择器注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。$(“div.redClass”
2021-12-15 22:09:03
193
原创 正则表达式
定义则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。作用给定的字符串是否符合正则表达式的过滤逻辑(匹配)可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)强大的字符串替换能力(替换)正则的组成几个常用的例子//整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2}$//只能.
2021-12-13 23:05:23
69
原创 HTML5的web存储
三种储存方式的区别cookie ：会在客户端和服务端来回传输 数据量较小 几klocalStorage ：数据量大一些，几M 除非手动删除吗否则一直存在sessionStorage ：数据量大一些，几M 只要关闭页面就不存在了localStorage对象优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。localStorage对象存储的数据没有时间限制。常用的有如下几个API：保存数据：localStorage.setItem(key,valu...
2021-12-13 22:09:53
476
原创 闭包的理解
闭包函数是指有权访问另一个函数作用域中的变量的函数，（函数中的函数）创建闭包函数最常见的方式是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，如下所示：function fn1(){ function fn(){ } return fn;}这种函数的嵌套方式就是闭包函数，目的是为了：1.可以在函数外部读取函数内部成员2.让函数内成员始终存活在内存中，让函数整体不至于因为函数的执行完毕而被销毁。但是还有这种写法：(function
2021-12-12 22:45:58
188
原创 深拷贝与浅拷贝
一.什么是深拷贝，什么是浅拷贝浅拷贝（shallowCopy）：被复制对象的所有变量都含有与原来的对象相同的值，而所有的对其他对象的引用仍然指向原来的对象。即对象的浅拷贝会对“主”对象进行拷贝，但不会复制主对象里面的对象。”里面的对象“会在原来的对象和它的副本之间共享。深拷贝（deepCopy）：深拷贝不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上,所以对一个对象的修改并不会影响另一个对象。二.深拷贝的实现方式1.使用JSON暴.
2021-12-10 22:27:48
457
原创 this的指向问题
1.在构造函数中，this指向实例化对象2.在对象函数中，this指向当前对象3.在普通函数中，this指向window4.在事件函数中，this指向事件源5.在定时器函数中，this指向window6.在原型函数中，this指向实例化对象7.在数组函数中，this指向当前数组...
2021-12-10 22:06:47
245
原创 弹性盒子布局补充（FlexBox）
一.document.write()弊端：只能往body中添加元素document.write('<divclass="box1">我是div</div>');二.innerHTML弊端：在同级下只能添加一种元素，多个会覆盖document.getElementById("divObj").innerHTML="<p>哈哈哈</p>";三.document.createElement()父元素.appendChild(...
2021-12-07 00:32:04
103
原创 图片跟随鼠标移动案例
一.document.write()弊端：只能往body中添加元素document.write('<divclass="box1">我是div</div>');二.innerHTML弊端：在同级下只能添加一种元素，多个会覆盖document.getElementById("divObj").innerHTML="<p>哈哈哈</p>";三.document.createElement()父元素.appendChild(...
2021-12-01 22:45:26
189
原创 获取验证码倒计时案例
要求：点击“获取验证码后”，变为“验证码已发送，请59秒后重试”，并且1分钟倒计时后恢复原样并能重新获取思路：1.一个获取验证码的按钮，点击后更换内容 2.利用字符串拼接，多少秒是个变量，初始值60，利用计时器每秒减一实现 3.为防止再次点击重新开始计时，在点击后禁用按钮，这个通过判断按钮的状态来实现具体代码：<!DOCTYPE html><html lang="en"><head> <met...
2021-12-01 22:02:34
564
1
原创 offset、client、scroll系列的区别
一.offset系列offsetLeft:获取元素距离最左边的距离：(1)、如果父元素没有定位，距离浏览器最左侧的距离(2)、如果父元素有定位，距离父元素最左侧的距离offsetTop:获取元素距离最上边的距离: (1)、如果父元素没有定位，距离浏览器最上侧的距离(2)、如果父元素有定位，距离父元素最上侧的距离offsetWidth:获取元素的宽度，包括border及以内，不包括marginoffsetHeight:获取元素的高度，包括bord...
2021-12-01 21:40:40
179
原创 购物车全选案例
要求：1.单击全选能勾选下列所有项 2.再次单击下列所有项都不勾选 3下列项只要有一个没有勾选时取消全选的勾选状态 4.下列项全部勾选时全选也变为勾选状态思路：1.实现单击全选能勾选下列所有项 2.通过判断全选按钮的状态，来实现再次单击下列所有项都不勾选 3.循环遍历给下面按钮都添加点击事件，通过判断下列每一个按钮的状态，来实现要求3和4具体代码展示如下：<!DOCTYPE html...
2021-12-01 00:00:50
574
原创 创建元素的三种方式
一.document.write()弊端：只能往body中添加元素document.write('<divclass="box1">我是div</div>');二.innerHTML弊端：在同级下只能添加一种元素，多个会覆盖document.getElementById("divObj").innerHTML="<p>哈哈哈</p>";三.document.createElement()父元素.appendChild(...
2021-11-30 23:52:13
438
原创 js新事件（2）
一.监听事件绑定监听事件： addEventListener("事件的类型",事件的处理程序)box1.addEventListener("click",myFunc)functionmyFunc(){this.style.backgroundColor="blue";}解绑监听事件removeEventListener("事件的类型",事件的处理程序)box1.removeEventListener("click",myFunc);二.事件对象...
2021-11-29 23:31:19
40
原创 数组去重的方法
一.indexOf思路：从左到右找到第一个对应得到索引，如果不存在 就返回-1 var arr1 = [1,2,3,4,4,5,5]; var arr2 = [] for(var i = 0;i<arr1.length;i++){ if(arr2.indexOf(arr1[i]) == -1){ arr2.push(arr1[i]); } } console.log(arr2);同理可用 la
2021-11-29 23:15:48
446
原创 js点击小图完成大图切换
思路：遍历伪数组，给四张小图绑定单击事件，让当前被单击的小图的src属性值赋给大图的src属性值，让小图的title的属性值，赋给下侧文本内容。步骤：1、页面的搭建2、获取元素3、遍历伪数组4、给四个小美女绑定单击事件5、把事件源的src属性值赋给大图的src属性值6、把事件源的title属性值赋给标题的innerText属性值重要步骤：//获取小图varsmallPic=document.getElem...
2021-11-27 02:11:30
3576
1
原创 js新事件（1）
一，鼠标事件onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。onmouseout鼠标移出事件：在鼠标指针移出元素后触发onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发onblur失去焦点事件：在鼠标光标失去焦点时触发。onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。onmouseleave鼠标离开事件：在鼠标指针离开元素后触发二，键盘事件onkeydown：键盘按下onkeyup:键盘抬起三，浏览器事件onl...
2021-11-27 01:48:42
53
原创 获取元素的几种方式
一，根据id获取元素vardiv1=document.getElementById("box1");二，通过类名获取元素varp1Arr=document.getElementsByClassName("p1");三，通过标签名获取元素vartag1=document.getElementsByTagName("div");四，通过name名获取元素varuserList=document.getElementsByName("user");...
2021-11-26 02:08:51
2541
原创 JavaScript中的内置对象
一.什么是js中的对象js中的所有事物都是对象：字符串、数值、数组、函数...每个对象都有属性和方法二.什么是js中的内置对象1、内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。2、浏览器上面跑的JS的内置对象有Math, String，Array, Date, 还有刚才的location。3、时间对象JavaScript的内置对象,使用前必须先声明。三.Math对象Math对象不是构造函数，它具有数学常数和函数的属性和方法
2021-11-25 00:54:52
493
原创 JS预解析
什么是预解析JavaScript引擎在对JavaScript代码进行解释执行之前，会对JavaScript代码进行预解析，在预解析阶段，会将以关键字var和function开头的语句块提前进行处理。如何处理当变量和函数的声明处在作用域比较靠后的位置的时候，变量和函数的声明会被提升到作用域的开头。(1)、函数提升func();function func(){ alert("Funciton has been called");}由于JavaScript的预解析机制，上面的
2021-11-24 01:04:35
391
原创 JS定时器
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：window.setTimeout(code,millisec);window.setInterval(code,millisec);清除定时器clearTimeout(定时器名)clearInterval(定时器名)...
2021-11-24 00:45:26
225
原创 JavaScript数组
数组的定义所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。获取数组元素格式：数组名[下标]下标又称索引（从0开始）功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。var arr = ['red', 'green', 'blue'];arr[0]; // redarr[2]; // bluearr[3]; // 这...
2021-11-23 01:38:44
173
原创 JS流程控制
一.流程控制介绍程序的三种基本结构顺序结构：从上到下执行的代码就是顺序结构(程序默认就是由上到下顺序执行的)分支结构：根据不同的情况，执行对应代码循环结构：重复做一件事情二.分支结构1.if语句if语句-只有当指定条件为true时，使用该语句来执行代码if...else语句-当条件为true时执行代码，当条件为false时执行其他代码if...elseif....else语句-使用该语句来选择多个代码块之一来执行第一种：if (/* ...
2021-11-21 18:44:33
129
原创 CSS特殊布局方式
一.左边固定，右边自适应（1）通过浮动和定位通过设置padding值空出左边位置，左边定位，右边浮动<body> <header> <div></div> <div></div> </header></body><style> header{ margin: 0; padd
2021-11-21 18:18:30
211
原创 JavaScript运算
1.算术运算符 + - * / %2.一元运算符一元运算符：只有一个操作数的运算符，5+6两个操作数的运算符是二元运算符※注意：前置++：参与运算输出；后置++：运算完毕输出3.逻辑运算符(布尔运算符)&& （与）：两个操作数同时为true，结果为true，否则都是false||或（或）：两个操作数有一个为true，结果为true，否则为false! （非）： 取反4.关系运算符(比较运算符)< ； > ...
2021-11-18 21:13:10
545
原创 js数据类型及数据类型转换
一.基本数据类型1.Number类型数值字面量：数值的固定值的表示法，例如110，1024，60.5数值判断：NaN：notanumber（可以通过Number()方法判断）NaN与任何值都不相等，包括他本身isNaN():isnotanumber（如果x是特殊的非数字值NaN（或者能被转换为这样的值），返回的值就是true。如果x是其他值,则返回false）2.String类型字符串可以使用单引号,也可以使用双引号，例如：'abc'、"abc"...
2021-11-18 21:02:15
60
原创 响应式布局
响应式布局的优缺点优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况什么是Viewportviewport是用户网页的可视区域。viewport翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（v
2021-11-12 22:22:39
253
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人