- 博客(53)
- 收藏
- 关注
RSS订阅原创 Vue生命周期
Vue生命周期实例生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期示意图beforeCreate(创建前)——没有什么用实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate 钩子函数，这个时候，数据还没有初始化，只是一个空壳，无法
2021-10-11 23:48:01
164
原创 webpack的基本使用
webpack的基本使用一、什么是webpack概念： webpack是前端工程化的具体解决方案主要工能： 它提供了友好的 前端模块化开发 支持，以及 **代码压缩混淆、处理浏览器端Javascript的兼容性、性能优化 ** 等强大的功能。二、webpack的基本使用在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：module.exports = { //webpack的运行模式，可选择development和produc
2021-10-08 17:00:38
688
原创 Vue常用指令
初始Vue Vue常用指令一、什么是VueVue是目前最火的一个前端框架，React是最流行的一个前端框架Vue是前端最主流的框架之一，和Angular，React一起，并成为前端三大主流框架Vue主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果，可以简化Dom操作app开发模式原生开发： Android–java、IOS–Object-C-swiftwebApp： 开发的网页在服务器上运行，在手机端有一个webView这样的组件——相当于一个手机内置的浏览器：问题
2021-09-21 14:49:37
256
原创 Gulp自动化构建打包工具
Gulp自动化构建打包工具gulp是一个项目开发的自动化构建打包工具，基于node环境来运行的官网：https://www.gulpjs.com.cn/一、什么是自动化打包构建工具我们在开发的过程中，会写到js ,css 等文件我们的项目如果想上线，那么一定要体积小一点，文件越小越好而我们写的js ,css 文件的时候，会有很多 换行/空格 之类的东西而这些 换行/空格 都是占文件体积的一部分那么我们在上线之前就要把这些 空格/换行 删除掉，但我们又不可能一个一个的去删除就要用到一个自
2021-09-11 18:00:14
380
原创 git版本控制工具
git版本控制工具一、什么是gitgit 官方名称： 分布式版本管理器通俗解释：就是一个管理我们文件夹的工具，只不过可以保留所有版本信息就是我们安装的一个软件然后这个软件来管理我们的文件夹这个文件夹被git管理后，我们可以对他进行各种操作保证我们写过的内容不会丢失二、git安装官网：https://git-scm.com/打开官网，直接下载选择自己电脑的操作系统和位数下载好后，直接安装一直下一步就可以了检测是否安装成功，在命令行窗口输入# 检测是否安
2021-09-09 19:50:05
3929
1
原创 CSS预处理工具（sass，scss）
CSS预处理工具一、什么是CSS预处理工具CSS预处理工具是一种语言，用来为CSS增加一些编程的特性，无需考虑到浏览器的兼容性问题例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言的一些基本技巧，可以让你的CSS更加简洁，适应性更强，代码更直观等诸多好处二、三款CSS预处理工具less官网： http://lesscss.cn/stylus官网： https://stylus.bootcss.comsass(有两个版本sass和scss，scss是sa
2021-09-03 22:46:45
725
原创 npm包管理工具
npm包管理工具一、NodeJs回顾Nodejs是一个应用编程平台，能运行JavaScript语言编写的代码，提供了JavaScript的运行环境，基于Google的V8引擎，V8引擎执行JavaScript的速度非常快，性能非常好，提供了大量应用编程接口API，在处理http网格、数据库、文件等操作时非常方便官网： http://nodejs.cn/安装好nodejs环境后，我们可以脱离浏览器环境，直接运行JavaScript代码nodejs模块开发内置模块：http模块，ftp模块…自定
2021-09-02 22:17:39
362
原创 JavaScript模板引擎
JavaScript模板引擎一、模板字符串的为什么不在js变量中写模板？如果将模板写到JS字符串中，维护不方便，不能换行，没有着色二、模板引擎用来从JSON数据中生成HTML字符串常用模板引擎能不能写在script标签中？script 标签的特点是innerHTML 永远不会显示在界面上如果 type 不等于 text/javascript 的话，内部的内容不会作为 JavaScript 执行三、Art-templateArt-template是一个简单且超快速的模板引擎，
2021-09-02 20:12:36
349
原创 常用数组遍历方法
常用数组遍历方法1.for循环\color{red}{1.for循环}1.for循环for (let i=0;i<arr.length;i++){ }2.filter\color{red}{2.filter}2.filter遍历原数组找数组中满足条件的所有值，返回给新数组 let arr = [ { name:'admin', age:23,id:1001}, { name:'root', age:22,id:1002},
2021-08-31 20:39:30
107
原创 设计模式（Design pattern）
设计模式一、什么是设计模式设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。总共有 23 种经典设计模式。这些模式可以分为三大类：创建型模式（Creational Patterns）、结构型模式（Structural Patterns）、行为型模式（Behavioral Patterns）二、设计模式分类
2021-08-31 19:46:31
158
原创 Jquery
Jquery一、Jquery基础1.jQuery介绍官方介绍jQuery是一个快速、小巧且功能丰富的JavaScript库jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式官网：https://jquery.com/中文官网：https://jquery.cuishifeng.cn/里面是jQuery的方法大全，而且是中文的2.jQuery下载与安装一、jQuery的下载 对于jQuery库文件，我们可以去“jQuery官网”下载。jQuery库文件有
2021-08-30 19:37:05
427
原创 什么是闭包
闭包一、函数回顾闭包 是我们函数的一种高级使用方式，在聊闭包之前我们要先回顾一下 函数函数的两个阶段定义阶段调用阶段二、函数执行空间三、不销毁的函数执行空间四、了解闭包闭包形成后生成一个不会被销毁的函数执行空间内部函数叫做外部函数的闭包函数五、闭包概念(熟记)有一个A函数，在A函数内部返回一个B函数在B函数内部，访问A函数内部的私有变量在A函数外部，有一个变量引用返回的B函数六、闭包三种写法1.显示写法function A(){ let nu
2021-08-28 10:03:40
1083
原创 同源策略与跨越及解决方案
同源策略与跨越及解决方案一、什么是同源策略同源策略是浏览器的一个安全功能，不同源的网页脚本在没有明确授权的情况下，不能读写对方资源。所谓同源是指 “协议+域名+端口” 三者相同二、什么是跨域使用AJAX技术（XMLHttpRequest 对象），从一个网页去请求另一个网页资源时，违反浏览器同源策略限制，引起的安全问题，称为跨域。域名主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js子域名不同 ht
2021-08-27 22:40:10
263
原创 对象和类的继承
继承一、引入面向对象的世界里，一切皆对象。每个对象都有自己的属性和方法根据不同对象的属性和方法，将对象分成不同类型比如：人类：有眼睛，鼻子，耳朵，能说话手机：能打电话，发短信学生类：能读书，写字继承是 类与类之间 的关系子类继承父类，子类就拥有父类的属性和方法二、JS中没有类，但是可以通过构造函数模拟类，然后通过原型来实现继承三、继承方式父类我们先准备一个父类(也就是要让别的构造函数使用我这个构造函数的属性和方法)//父类-人类function Person(){
2021-08-27 20:43:32
322
原创 淘宝京东商品放大镜案例
html<div class="container"> <div class="left"> <div class="box"> <img src="image/show_1.jpg" class="originalImg"> <div class="mask"></div> </div> <div class="
2021-08-27 19:42:59
167
1
原创 COOKIE
COOKIECookie是保存在客户端的纯文本文件。比如txt文件。所谓的客户端就是我们自己的本地电脑。一般来说cookie都是服务器端写入客户端的纯文本文件。Cookie 文件必须由浏览器的支持，在浏览器中可以设置阻止cookie。这样服务器端就不能写入cookie 到客户端了。cookie到底干什么用呢？在sesion技术出现之前，一般网站都是通过cookie保存请求的内容，服务器根据用户进行特定的内容展示。COOKIE 的存储形式cookie 是以字符串的形式存储，在字
2021-08-27 19:37:25
74
原创 Promise（异步与同步）
Promise（异步与同步）一、异步与同步现实世界中同步与异步操作软件世界同步操作当一个操作开始执行后，主程序需等待它完成，才能继续向下执行异步操作当一个操作开始执行后，主程序无需等待它的完成，可以继续向下执行。此时该操作可以跟主程序同时(并发)执行示例-文件操作示例-Ajax异步网络请求问题：异步任务完成后返回结果处理问题？解决办法：回调函数（回调函数可以解决异步任务问题）二、回调函数function callBack(){
2021-08-27 19:31:37
1257
原创 AJAX异步通讯
Ajax一、ajax是什么？Ajax：现在允许浏览器与服务器通讯而无需刷新当前页面的技术，是不需要刷新整个页面，只刷新局部页面的一种异步通讯技术二、Ajax技术的核心：XMLHttpRequest对象发送请求到服务器并获得返回结果new Window.XMLHttpRequest()在不重新加载页面的情况下更新网页在页面已加载后从服务器请求数据在页面已加载后从服务器接收数据在后台向服务器发送数据三、常用方法open(nethod,URL,async)建立与服务器的链接me
2021-08-26 20:17:16
303
原创 HTTP协议
http协议一、前后端分离的应用程序前后端分离之前，前端只负责写静态页面交给后工程师渲染数据，统一部署到后端服务器，没有前端工程师之说前后端分离图示通讯协议http通讯技术ajax业务定义接口文档二、http协议引入HTML是一种用来定义网页的文本，会HTML，就可以编写网页；HTTP是网络上传输HTML和数据的协议，用于浏览器和服务器的通信在Web应用中，服务器把网页传输给浏览器，实际上就是把网页的HTML代码发送给浏览器，让浏览器显示出来而浏览器和服
2021-08-26 19:10:24
84
原创 Mysql的安装和卸载
MySQL的使用1、MySQL是什么MySQL是一个关系型的数据库数据库: 库：仓库 数据：一切可以被计算机识别的 图像 文字 数字 ...数据库：简单的说是一个容器 这个容器 这个容器中只不过装的是 数据MySQL是存储到 文件系统中的 (就是放在磁盘上的文件中的)因为放到磁盘的文件中的 所以 会设计到IO操作IO的操作 涉及到磁盘的读写 磁盘的读写时间涉及到 磁盘的旋转 和 磁盘的 寻道时间磁盘的旋转时间是很短的 磁盘的寻道时间是很长的 所以 得出一个结论
2021-08-25 09:17:19
139
原创 Nodejs
NodeJs服务编程基础一、为什么要学习后端编程目前市场上的需求，要求前端人员掌握后端编程方便和后端开发人员进行交互能独立开发完整系统，成为全栈工程师二、后端编程做什么接受客户端请求处理业务逻辑响应数据后端接收请求处理业务逻辑响应数据需要写代码来实现，需要一门编程语言，后端编程语言java、javascript、python、php…编写的代码部署到一台独立的电脑，供用户访问,这台电脑称为后端服务器服务器是怎么访问的呢IP地址，唯一标识网络中一台电脑port
2021-08-23 20:49:02
250
原创 面向对象编程
面向对象编程一、面向对象编程思想面向对象介绍什么是对象，我们可以从两层来理解Everything is object （万物皆对象）对象是单个事物的抽象，是一个具体的事物一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程对象是一个容器，封装了属性（property）和方法（method）。属性是对象的状态特征，方法是对象的行为（完成某种任
2021-08-22 20:13:42
115
原创 本地存储localstorage
本地存储localstoragelocalstoragehtml5中的 Web Storage 存储方式localStorage用于存储一个域名下的需要永久存储在本地的数据，这些数据可以一直被访问，直到这些数据被删除Web Storage API添加键值对添加键值对:localStorage.setItem(key,value) setItem 用于把值value 存储到键key 上，除了使用setItem ，还可以使用localStorage.key=value 或者localStor
2021-08-17 22:53:16
883
原创 JSON数据交换格式
JSON数据交换格式一、JSON介绍JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript语言的一个子集二、JSON语法语法规则json对象是一个无序的“‘名称/值’对”集合。一个对象以 {左括号 开始， }右括号 结束。每个“名称”后跟一个 :冒号 ；“‘名称/值’ 对”之间使用 ,逗号 分隔。{“名称1”:“值1”,“名称2”:“值2”}JSON值JSON值可以是：数字(整数或浮点数)字符串(在双引号中)逻辑值(tr
2021-08-16 20:39:35
374
原创 正则表达式
正则表达式一、什么是正则表达式正则表达式，全称“Regular Expression”，在代码中常简写为regex、regexp、RE正则表达式，就是用某一种模式去匹配一类字符串的公式二、正则表达式的定义方法显示定义（构造函数）var 变量名 = new RegExp(‘正则表达式模式’)隐式定义(字面量)var 变量名 = /正则表达式模式/举个栗子var str = new ReExp("\d+")var str = /\d+///两种方式等价三、正则表达式的常用方
2021-08-16 19:43:21
118
原创 This关键字和ES6新特性
This关键字与ES6新特性一、this关键字每一个函数内部都有一个关键字 this可以让我们直接使用的函数内部的this 指向谁，取决于函数的调用方式全局定义的函数调用，this =>windowfunction fn(){ console.log(this)}fn()//此时this指向window对象内部的方法调用this = >调用者var obj = { fn:function (){ console.log(
2021-08-12 19:28:07
234
原创 事件
事件JavaScript事件一、JavaScript事件简介什么叫事件当我们点击一个按钮的时候，会弹出一个对话框。在JavaScript中，“点击”这个事情就看做一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事事件该有的3部分事件源：触发谁的事件事件类型：这个事件是干啥的，是点击呢，还是移动呢事件处理函数var odiv = document.querySelector('div')div.onclick = function(){}//谁来触发事件
2021-08-07 14:13:22
138
原创 DOM文档对象模型（下）
DOM文档对象模型（下）一、DOM节点从文档对象模型DOM角度看每个html标签、标签属性、内容、注释…都被看成dom节点DOM 就是我们 html 结构中一个一个的节点构成的DOM节点分类DOM节点类型整个文档是一个 文档节点每个HTML 元素是 元素节点HTML 元素内的文本是 文本节点每个HTML 属性是 属性节点注释是 注释节点常用的三大类：元素节点/文本节点/属性节点元素节点我们通过getElementById.... 获取到的都是 元素节点属性节点我
2021-08-06 17:20:49
97
原创 DOM文档对象模型（上）
DOM文档对象模型（上）DOM（Document Object Model）： 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素移除一个元素创建一个元素向页面里面添加一个元素给元素绑定一些事件获取元素的属性给元素添加一些 css 样式…DOM 的核心对象就是 docuemnt 对象document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DO
2021-08-04 22:49:35
71
原创 BOM浏览器对象模型
BOM浏览器对象模型BOMBOM(Browser Object Model):浏览器对象模型其实就是操作浏览器的一些能力我们可以操作哪些内容获取浏览器的相关信息（窗口的大小）操作浏览器进行页面的跳转获取浏览器的地址栏信息操作浏览器的滚动条浏览器的信息（浏览器的版本）浏览器出现一个弹出框（alert/confirm/prompt）BOM的核心就是window对象window是浏览器的内置的一个对象，里面包含着操作浏览器的方法[外链图片转存失败,源站可能有防盗链机制,建议将图
2021-08-03 22:08:15
57
原创 Math和Date
Math和Date一、Math**概述：**js内置对象，处理数学问题Math对象方法abs(x) 返回数的绝对值acos(x)返回数的反余弦值asin(x)返回数的反正弦值atan(x)以介于-π/2与π/2弧度之间的数值来返回x的反正切值atan2(y,x) 返回从x轴到点（x,y）的角度（介于-π/2与π/2弧度之间）ceil(x)对数进行向上取整floor(x) 对数进行向取整exp(x) 返回e的指数cos(x) 返回数的余弦l
2021-07-31 09:21:50
71
原创 字符串
字符串一、创建字符串字面量创建var str = 'hello'构建函数创建var str = new String('hello')两种方式创建的字符串没有区别，除了在控制台打印显示的区别除外二、字符串操作字符串有length 属性，表示字符串的长度，也就是字符串中字符的个数注： 空字符串也算一个字符字符串是按照索引排列，可以通过索引访问每一个字符，字符值只能访问 ，不能改变var str = 'hello world'document.write(st
2021-07-29 20:55:28
72
原创 数组、冒泡排序和选择排序
数组一、数组基础什么数组数组是一系列数据的集合也就是我们把一些数据放在一个盒子里面，按照顺序排好,这个东西就是一个数组，存储着一些数据的集合 例如 [1, 2, 3, ‘hello’, true, false]数组数据类型Array创建一个数组数组就是一个 [ ]在 [ ] 里面存储着各种各样的数据，按照顺序依次排好字面量创建一个数组//创建一个空数组var arr1=[]//创建一个有内容的数组var arr2=[10,20,30]内置构建函数创建一个数
2021-07-27 22:34:57
290
原创 打印Fibonacci（斐波那契）数
function Fibonacci(n) { var f1 = 0 var f2 = 1 var fn = f1 + f2 var i for (i = 3; i <= n; i++) { f1 = f2 f2 = fn fn = f1 + f2 } return fn}var s = Fibonacci(20)document.write(s,'<br>')functio
2021-07-24 15:53:54
131
原创 JavaScript函数（下）
函数（下）作用域（重点）什么是作用域，就是一个变量可以生效的范围变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域全局作用域全局作用域是最大的作用域在全局作用域中定义的变量可以在任何地方使用页面打开的时候，浏览器会自动给我们生成一个全局作用域 window这个作用域会一直存在，直到页面关闭就销毁了// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的var num = 100var num2 = 200局部作用域局部作用域就
2021-07-24 15:33:26
43
原创 JavaScript函数（上）
函数（上）我们代码里面所说的函数和我们上学的时候学习的什么三角函数、二次函数之类的不是一个东西函数介绍1.将任意代码封装到一起，需要的时候进行调用执行语法:function 函数名(){函数体，封装代码}函数名() //调用函数函数的概念对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面在我想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行先看一段代码// 这个是我们以前写的一段代码for (var i = 0; i < 10; i+
2021-07-22 20:46:22
50
原创 循环结构while、do...while、for循环和终止循环
循环结构循环结构，就是根据某些给出的条件，重复的执行同一段代码循环必须要有某些固定的内容组成初始化条件判断要执行的代码自身改变WHILE 循环[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gGZ9C9gg-1626866371715)(./media/1621247215757.png)]while，中文叫 当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了语法 while (条件) { 满足条件就执行 }因为满足条件就
2021-07-21 19:25:55
481
原创 分支结构（if条件语句和switch分支语句）
分支结构我们的 js 代码都是顺序执行的（从上到下）逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码IF 条件分支结构if 语句通过一个 if 语句来决定代码执行与否语法： if (条件) { 要执行的代码 }通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行// 条件为 true 的时候执行 {} 里面的代码if (true) { alert('因为条件是 true，我会执行')}// 条件为 false 的时候不执行 {} 里面的代码if
2021-07-20 16:48:17
187
原创 JavaScript历史，变量，数据类型和运算符
一、JavaScript历史 javascript是1995年网景公司雇佣布兰登开发的全新语言 javascript最初是为了实现浏览器客户端交互 ECMAScript与javascript关系javascript组成： JS就是通过固定的语法去操作浏览器和标签结构来实现网页上的各种效果javascript引入方式 行内式：在html标签元素属性上设置JavaScript代码 内嵌式：新建script标签，在标签内写JavaScript代码
2021-07-19 19:52:07
124
1
原创 变形：位移、旋转、放缩、斜切和多列布局
一、变形：位移、旋转、放缩、斜切语法： transform：变形的方式;1.位移 transform：translate(x,y); transform：translateX(*PX) transform：translateY(*PX) transform：translateZ(*PX) 同一属性，一起使用会发生覆盖，若想一起使用用transform（）或者transform：translateX(*PX) translateY(*PX) translat
2021-07-14 17:02:22
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人