- 博客(57)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 一篇文章解决vue生命周期
Vue生命周期Vue 实例从创建到销毁的过程，就是生命周期。 从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。（在以下流程中，生命钩子函数用加粗表示）挂载流程初始化生命周期、事件，但数据代理为开始；beforeCreate：此时无法通过vm访问到data中的数据以及methods中的方法；初始化数据监测、数据代理；created：此时可以通过vm访问到data中的数据，methods中的方法；Vue开始解析模板，生
2021-11-03 11:58:33
319
原创 详解Vue2基本语法第五弹
全局事件总线1、一种组件间通信的方式，适用于任意组件间通信2、安装全局事件总线：new Vue({...beforeCreate(){ Vue.prototype.$bus = this//安装事件总线，$bus就是当前应用的vm }})3、使用事件总线：（1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身methods(){ demo(data){} ... mounted(){
2021-10-28 10:30:15
216
原创 详解Vue2基本语法第四弹
ref属性1、被用来给元素或子组件注册引用信息2、应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）3、使用方式：（1）打标识：<h1 ref="xxx"></h1>或<school ref="xxx"></school>（2）获取：this.$refs.xxxprops配置项1、功能：让组件接收外部传进来的数据2、传递数据：<Demo name="xxx">3、接收数据
2021-10-28 10:14:14
214
原创 详解Vue2基本语法第三弹
事件处理事件的基本使用1、使用v-on:xxx或@xxx绑定事件,其中xxx是事件名2、事件的回调需要配置在methods对象中，最终会在vm上3、methods中配置的函数不要使用箭头函数，否则this就不是vm了4、methods中配置的函数，都是被vue管理的函数，this的指向是vm或组件实例对象5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参事件修饰符1、prevent:阻止默认事件2、stop：阻止事件冒泡事件
2021-10-25 19:28:49
223
原创 详解Vue2基本语法第二弹
绑定样式1、Class样式写法:class="xxx",xxx可以是字符串、对象、数组2、style样式 :style="{fontSize:xxx}"，其中xxx是动态值 :style="[a,b]"，其中a,b是样式对象 条件渲染1、v-if写法（1）v-if="表达式"（2）v-else-if="表达式"（3）v-else="表达式"适用于：切换频率较低的场景特点：不展示的DOM元素直接被移除注意：v-if与v-else-if可以
2021-10-25 19:20:21
404
原创 详解Vue2基本语法第一弹
与Vue的第一次相识1、想让vue工作，就必须创建一个vue实例，且要传入一个配置对象 el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串 data中用于存储数据，数据供el指定的容器去使用 let vm = new Vue({ el:"#root", data:{ a:1 }})2、容器内的代码依然符合html规范，只不过混入例如一些特殊的vue语法3、容器内的代码被叫做vue模板
2021-10-24 20:03:27
2494
原创 一篇文章解决ES6Promise（加源码解析）
什么是promise？promise是JS中进行异步编程的新解决方案，promise是一个构造函数，使用promise对象可以用来封装一个异步操作并可以获取其成功/失败大的结果值Promise状态的改变 pending变为resolved（成功） pending变为rejected（失败） 注意：只有这两种，且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据，成功结果数据一般称为value，失败为reason。promise的基本使用..
2021-10-24 19:41:34
186
原创 一篇文章解决HTTPS握手
HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行握手，在握手过程中将确立双方加密传输数据的密码信息。一、客户端与服务端协商加密方式 客户端发送Client Hello报文开始SSL通信，报文中包含客户端支持的SSL版本、加密组件列表以及生成的随机数（这里记为A） 服务端可进行SSL通信时以Server Hello报文作为应答，报文中包含支持的SSL版本以及加密组件（从接收到的客户端加密组件中筛选的）以及生成的随机数（这里记为B） 服务端发送Server He
2021-10-24 19:28:11
136
原创 一篇文章带你了解git命令
git最操作创建工作目录/对工作目录进行修改gitadd./ 将在工作区进行的修改提交到暂存区，相当于以下两个操作：githash-object-w文件名(修改了多少个工作目录中的文件此命令就要被执行多少次) gitupdate-index...gitcommit-m"注释内容" 将暂存区的数据提交并生成一个提交对象，相当于以下两个操作：gitwrite-tree gitcommit-treegit高层命令(CRUD)gitinit：...
2021-10-07 23:19:18
137
原创 一篇文章带你解决OSI参考模型
什么是协议协议，指的就是计算机与计算机之间通过网络实现事先达成的一种约定，两台计算机之间必须支持相同的协议并遵循相同协议进行处理才能实现相互通信。就好比两个人，一个讲客家话，一个讲潮汕话，语言都不一样了，怎么能够沟通下去呢，计算机之间也是如此。常见的协议TCP/IP：用于互联网、局域网，有HTTP协议、TCP协议、IP协议、UDP协议等 IPX/SPX：用于个人电脑局域网 AppleTalk：用于苹果公司现有产品的局域网OSI参考模型协议分层为了使较为复杂的网络协议更加简单化，OS
2021-10-04 23:35:37
141
原创 一篇文章带你了解接口防刷与常见签名加密算法
什么是接口？要想了解接口防刷，首先我们应该要对接口有一个概念。接口，可以分为程序内部的接口：方法与方法、模块与模块之间，通过调用程序内部抛出的接口进行交互；系统对外的接口：通过调用别人提供的接口来获取别人网站或者服务器上的资源或信息。接口防刷在用户访问接口时获取用户IP，访问一次则访问次数对应加1，并为该访问次数设置有效时间在每次访问时判断访问次数值是否超过设置的最大访问次数，如果是则拒绝该用户访问 根据接口的承受能力设置限流，当每秒请求量达到指定阈值时拒绝多余请求 给对外接口加验证身份的签
2021-10-02 23:18:18
1112
原创 一篇文章带你了解Web主被动攻击手段
今天这篇文章我们来讲讲以Web站点作为目标的攻击手段，以及这些攻击会对Web站点造成的影响。其实，一般来说HTTP协议是不会成为被攻击的对象的，而应用在协议上的服务器与客户端，以及运行在服务器上的应用程序才是攻击目标。针对Web应用的攻击模式主动攻击：攻击者通过直接访问Web应用，把攻击代码传入的攻击模式。由于该模式是针对服务器上的资源进行攻击，因此攻击者需要能够访问到那些资源。如：SQL注入攻击和OS命令注入攻击。 被动攻击：利用圈套策略执行攻击代码的攻击模型。在被动攻击过程中，攻击者不直接
2021-10-01 21:26:03
1852
原创 一篇文章解决Number数据类型
数据类型在JavaScript中有6种原始数据类型：Undefined、Null、Boolean、Number、String、Symbol(ES6添加的)，以及1种复杂数据类型：Object。今天我们就来详细讲讲Number数据类型：Number数据类型Number类型最基本的数值字面量格式就是十进制整数：let number = 55;整数也可以使用八进制或十六进制字面量表示，对于八进制字面量第一个数字必须是0，然后是对应的八进制数字；十六进制则是在加上数字前缀0x，然后是十六进
2021-09-29 16:43:30
267
原创 一篇文章解决时延
时延时延指的是在报文或者分组从一个网络的一端传送到另一端所需要的时间，即数据包第一个比特进入路由器到最后一比特从路由器输出的时间间隔。时延的计算公式如下：总时延 = 发送时延+传播时延+处理时延+排队时延我们主要考虑发送时延与传播时延，对于报文较大发送时延是主要矛盾；而对于较小报文，传播时延是主要矛盾。发送时延发送时延指从发送数据帧的第一个比特起，到该帧的最后一个比特发送完毕所需的时间。计算公式：发送实验=数据长度（bit）/信道带宽(bit/s)从上面式子可以看出，发送
2021-09-28 22:12:30
772
原创 一篇文章解决Ajax
Ajax如何工作？网页中发生一个事件（如页面加载、按钮点击） 由JavaScript创建XMLHttpRequest对象 XMLHttpRequest对象向Web服务器发送请求 服务器出了该请求 服务器将响应返回给网页 由JS读取响应 由JS执行正确的动作Ajax的核心是XMLHttpRequest对象创建XMLHttpRequest对象：variable=newXMLHttpRequest()跨域访问：处于...
2021-09-27 23:31:58
100
原创 JavaScript正则表达式
定义：正则表达式是用来匹配字符串中字符组合的模式。创建一个正则表达式①使用正则表达式字面量,其由包含在斜杠之间的模式组成var re = /ab+c/②使用RegExp对象构造函数var re = new RegExp("ab+c")断言对于文本、词或模式，边界可以用来表明它们的起始或终止部分。边界类断言：^:匹配输入的开始 $:匹配输入的结束 \b:匹配一个单词的边界，这是一个字符前后没有另一个字的字符位置例子：/oo\b/ 在 "moon" 中不..
2021-09-26 21:22:38
79
原创 JavaScript类的使用
类的使用1、定义：类关键字使用关键字class可以在JS中声明一个类：ClassUser{//类的主体}如果在定义类时没有指定类名，可以通过类表达式，将类分配给变量：constUserClass=class{//类的主体}创建类的实例，实例是包含类所描述的数据和行为的对象 。使用new运算符实例化该类，语法：instance=newCl...
2021-09-25 15:49:39
1311
原创 TCP连接三次握手、四次挥手和泛洪攻击
数据收发操作在介绍三次握手前，我们首先需要了解浏览器发送消息到接收到响应消息这个过程协议栈是如何进行数据收发操作的。创建套接字 将管道连接到服务器端的套接字上 收发数据 断开数据并删除套接字当客户端通过DNS查询到目标IP地址后，就可以委托操作系统内部的协议栈向Web服务器发送消息了。操作系统内部的协议栈发出委托时，需要调用Socket库中的程序组件。首先，调用其中的socket程序组件创建套接字，并返回一个描述符。套接字的实体就是通信控制信息，协议栈可以根据这些信息来判下一步的行动。在
2021-09-24 22:02:58
745
原创 线性表链式存储结构-javascript实现
function LinkedList(){ //节点定义 function Node(element){ this.element = element this.next = null } let length = 0 //存放链表长度 head = new Node(null) //头节...
2021-09-09 16:33:23
157
原创 线性表顺序存储结构javascript实现
插入操作<script> //声明一个数组a let a = [] //设置线性表最大长度 let MaxLength = 4 //number为插入数字，i为索引 let insert = (number,i)=>{ if(a.length==MaxLength){ alert("不能插入了") }
2021-09-09 16:19:59
117
原创 javascript正则表达式
正则达式是用来匹配字符串中字符组合的模式。创建一个正则表达式①使用正则表达式字面量,其由包含在斜杠之间的模式组成var re = /ab+c/②使用RegExp对象构造函数var re = new RegExp("ab+c")断言对于文本、词或模式，边界可以用来表明它们的起始或终止部分边界类断言^:匹配输入的开始 $:匹配输入的结束 \b:匹配一个单词的边界，这是一个字符前后没有另一个字的字符位置例子：/oo\b/ 在 "moon" 中不会匹.
2021-09-09 10:05:12
62
原创 javascript算法题
【算法】【中等】在一个字符串数组中有红、黄、蓝三种颜色的球，且个数不相等、顺序不一致，请为该数组排序。使得排序后数组中球的顺序为:黄、红、蓝。例如：红蓝蓝黄红黄蓝红红黄红，排序后为：黄黄黄红红红红红蓝蓝蓝。<script> let sortballs = (array)=>{ //利用正则选出“黄”字符串 let a = array.filter(function callback(element){return
2021-09-08 15:36:26
320
原创 纯CSS实现一个三角形加圆角三角形
效果图：代码如下（注释有大概思路）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0.
2021-08-30 16:59:13
2107
原创 一篇文章包你学会Flex布局
Flexible BoxFlexible Box是一种新的排版上下文，它可以控制子级盒子的以下样式：摆放的流向 摆放顺序 盒子宽度与高度 水平和垂直方向的对齐 是否允许折行设置给父元素的属性生成Flex容器使用display:flex使元素生成一个块级Flex容器 使用display:inline-flex使元素生成一个行级Flex容器flex-direction:控制摆放流向可选值：row：从左到右 row-reverse：从右到左 column：从上到下
2021-08-20 13:23:17
254
原创 CSS进阶
transform变形transform用于对元素进行平移、旋转、缩放和倾斜。属性：translate：平移 rotate： 旋转 scale：缩放 skew：倾斜translate需要两个长度单位作为参数，表示将元素分别向右、向下移动指定长度。.emoji{transform:translate(100px,100px)}也可以使用translateX和translateY分别使用一个长度单位来控制元素沿X轴或Y轴平移。.emoji{transform:tra
2021-08-19 18:46:30
65
原创 带你了解HTTPS的安全通信机制
HTTPS是什么？很多人看到HTTPS就会想到HTTP，因为它们毕竟就差了一个字母，那它们之间到底有什么关系呢？请看：HTTPS = HTTP + 加密处理 + 认证 + 完整性保护那又是为什么要这样呢？我们需要了解HTTP的一些缺点：通信使用明文，内容容易被窃听：TCP/IP是可能被窃听的网络 不验证通信方身份，有可能遭到伪装：任何人都可以发起请求 无法验证报文的完整性，可能遭到篡改：接收到的内容可能遭到中间人攻击这个时候，HTTP的这些缺点通过SSL可以弥补，所以就诞生了HTTPS
2021-08-18 19:37:41
172
原创 浏览器工作原理-呈现引擎
浏览器的主要组件要了解浏览器的工作原理，我们需要首先知道浏览器都有哪些主要组件：用户页面：除了浏览器主窗口显示的请求页面外，其他显示的各个部分都属于用户页面 浏览器引擎：在用户界面和呈现引擎之间传送指令 呈现引擎：负责显示请求的内容 网络：用于网络调用 用户界面后端：用于绘制基本的窗口小部件 JavaScript解析器：用于解析和执行JavaScript代码 数据存储：持久层呈现引擎主流程解析：HTML解析和CSS解析 构建呈现树：整合DOM树与styleSheet 布
2021-08-17 20:23:01
198
原创 前端面试题-4
哪些事件可以冒泡？不能冒泡的事件：abort（音频终止加载）、resize（调整窗口大小）、error（加载失败时）、load（已经加载时）、unload（正在被卸载时）、mouseenter.mouseleave、blur（失去焦点）、focus（获得焦点）。可以冒泡的事件：brforeinput、click、compositionstart、compositionupdate、compositionend、dblclick（双击）、focunsin、focusout、inputkeydown、k
2021-08-16 18:31:18
80
原创 jQuery库-事件
事件处理事件绑定eventName(function(){})：绑定对应事件名的监听$("div").click(function(){})on(eventName,function(){})：通用的绑定事件监听$("div").on("click",function(){})优缺点：eventName(function(){})编码方便，但只能加一个监听，而且有的监听事件不支持 on(eventName,function(){})编码不方便，可以添加多个监听，且更通用
2021-08-16 17:16:35
83
原创 从头开始了解jQuery库
初识jQueryjQuery是JavaScript中使用最广泛的一个库，它极大地简化了JavaScript编程。每一个入门JavaScript的前端工程师都应该了解和学习它。为什么jQuery如此流行？消除浏览器差异：我们不需要像使用原生js时得用冗长代码才能针对不同浏览器来绑定事件 简洁的操作DOM的方法 轻松实现动画、修改CSS等操作使用jQuey我们可以在jQuery官网下载，它只是一个jQuery-xxx.js文件，分为以已压缩和未压缩两种版本。然后在页面的<head&g
2021-08-15 12:16:00
124
原创 七夕约会-带你读懂行内元素
约会准备：专业术语首先，我们先得掌握几个专业术语，这会帮助我们深入了解行内元素。匿名文本：指所有未包含在行内元素中的字符串。如：<p>hello<em>world</em></p>em框：也称为字符框。如下图所示，我们设置font-size实际上是在给em框提供大小，实际显示的字符大小并不一定是这个大小。内容区：在非替换元素中，内容区可能有两种，可以是元素中各字符的em框串在一起构成的框，也可以是由元素中字符自行描述的框。在替换元素中.
2021-08-14 12:13:58
107
原创 JavaScript基础-事件
什么是DOMDOM，全称为Document Object Model（文档对象模型）。在JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作Web页面。
2021-08-13 18:29:00
118
原创 JavaScript基础-DOM
什么是DOMDOM，全称为Document Object Model（文档对象模型）。在JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作Web页面。
2021-08-12 13:07:10
154
原创 前端面试题CSS-6
隐藏元素的方法有哪些？display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。 visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。 opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。 z-index: 负值：来使其他元素遮盖住
2021-08-10 18:52:07
119
原创 前端每日三题HTML-5
script标签中defer和async的区别?如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。下图可以直观的看出三者之间的区别:其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：执行顺序：多个带async属性的标签，不能保证加载的顺序；多个带de
2021-08-09 12:41:48
93
原创 前端面试题HTML-4
title与h1的区别、b与strong的区别、i与em的区别？strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签,搜索引擎更侧重strong标签。 title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响 i标签的作用仅仅是为了让字体显示斜体，对于SEO没什么作用；em标签的作用不仅可以让字体显示斜体，而且可以加强语气，告诉搜索引擎这里是重要的。 label 的作用是什么？如何使用？label标签主要用于绑
2021-08-07 18:34:51
104
原创 JavaScript基础-数组
数组也是一个对象，它和普通的对象功能一样，也是用来存储一些值的。不同的是普通对象使用字符串作为属性名，而数组使用数字作为索引操作元素。索引：从0开始的整数就是索引，比如有一个数组[1,2,3,4],那么索引0对应的元素就是1，索引1对应的元素就是2，以此类推...创建一个数组方法一：var 数组名 = new Array()方法二：使用字面量来创建一个数组语法：var 数组名 = [元素]使用字面量创建数组时，可以在创建时就指定数组中的元素，将要添加的元素作为构造函数的参数传递进
2021-08-07 18:13:31
660
原创 前端面试题HTML-3
行内元素有哪些？块级元素有哪些？空元素有哪些？行内元素有：a b span img input select strong； 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>； 鲜见的有：<area&
2021-08-05 23:35:49
77
原创 HTML5-canvas画布1
创建一个画布（Canvas）<canvas>标签定义可以图形，但是必须使用脚本（通常是javascript）来绘制图形（IE9及以上浏览器支持该标签）注意：默认情况下<canvas>元素没有边框与内容可以在便签中添加width、height属性，也可以使用style来添加边框，建议永远不在CSS设置canvas宽高支持 <canvas> 的浏览器会只渲染 <canvas> 标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器
2021-08-05 23:04:02
265
原创 前端面试题HTML-2
常用的meta标签有哪些？meta标签由name和content属性定义，用来描述网页文档的属性，比如网页作者、网页描述、关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。常见的meta标签：charset：用来描述HTML文档的编码类型<meta charset = "UTF-8" />keywords：页面关键词<meta name = "keywords" content = "关键词" />desc
2021-08-04 21:56:41
104
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人