- 博客(57)
- 收藏
- 关注
RSS订阅原创 前端面试题
1.为什么组件中数据需要是一个函数?组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，如果直接使用对象包裹, 那么组件在复用时, 所有的数据都执行同一块内存空间, 修改某一个, 所有的组件值都会发生变化, 这不符合服用的逻辑...
2020-09-01 21:01:55
324
原创 Moment.js的基本使用
一、Moment.js的简介Moment.js是一个轻量级的JavaScript时间库，以前我们转化时间，都会进行很复杂的操作，而Moment.js的出现，简化了我们开发中对时间的处理，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。二、在node.js里面操作步骤1.安装momentnpm install moment2.导入模块//require导入var moment = require('moment');//import
2020-09-01 19:03:43
7655
原创 webpack的使用
1. webpack的默认配置创建项目文件夹nodejs初始化 npm init -y安装模块 npm i webpack webpack-cli --save-dev创建文件夹 dist dis里面创建index.html文件创建文件夹 src src里面写index.js文件打开终端 输入 npx webpack进行打包 打包完毕 dist文件里面会出现一个main.js在index.html里面引入main.js (main.js是根据src文件夹里面的文件打
2020-08-25 19:04:02
312
原创 vue的axios的实现
一、axios和ajax的区别axios就是ajax，但是ajax不等于axios，axios只是通过promise实现对ajax的封装，就像jQuery对ajax的封装一样简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。原生ajax function ajax(url){ var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHtt
2020-08-25 15:17:35
330
原创 Vue.js函数的生命周期
一、vue里的生命周期是什么？vue实例从创建到销毁的过程称之为vue的生命周期二、vue.js里面的钩子函数钩子函数 昰什么相当于回调函数 即让开发者在特定的时候 执行自定义逻辑1、自定义指令的钩子函数bind : 让开发者将自定义指令绑定到dom元素上面时 执行自定义逻辑inserted ： 让开发者在元素插入dom树的时候 执行之定义逻辑update ： 让开发者在元素状态发生变化的时候 执行之定义逻辑2、vue.js生命周期里面一共有8个钩子函数beforeCrea
2020-08-18 20:56:06
428
原创 Vue的双向数据绑定
一、什么是双向数据绑定数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。二、vue里面的双向数据绑定在vue里面使用v-model实现双向数据绑定，代码非常的方便简单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
2020-08-18 20:13:36
2265
原创 js的时间线
时间线：三个状态（document.readyState）1、loading这个状态的时候开始绘制DOM树2、interactiveDOM树绘制完成后是这个状态，但是此时src、href中的资源未加载3、complete 或者 loadedsrc、href中的资源加载完成三个事件 1、DOMContentLoaded 这个事件是DOM树绘制完成后触发，也就是上面的状态为interactive的时候 2、window.onload
2020-08-11 22:57:23
194
原创 JS异步加载的方式
一.异步加载说起异步加载，我就先说说同步加载同步加载(同步模式) :又称阻塞模式，会停止浏览器的后续处理，也就是后续的代码解析和页面渲染。而我们通常写代码都是在同步模式中，一旦前面有代码出错，后面的代码就会停止运行。异步加载:又称非阻塞模式，在下载js文件的同时，对后续的代码也进行处理。也就是说，在异步加载模式下，一旦前面的代码出错，后面的代码也不会停止执行。二.异步加载的方式1.动态创建script标签2.defer和async属性...
2020-08-10 22:34:45
239
原创 js的兼容性及处理方法
1.关于获取行外样式的兼容性通过js我们不能通过（HTML元素.style.样式属性）获取到页面上元素的行内样式，我们可以通过一下两个方法来获取行内样式1.getComputedStyle(oDiv,false)兼容Firefox，Opera，Safari，Chrome，不兼容IE2.currentStyleIE下获取行内样式oDiv.currentStyle.width这里封装了一个兼容所有浏览器的函数 funtion getStyle(obj,name){ if(obj.curre
2020-08-04 18:40:47
833
原创 Node.js 连接 MySQL
导言在我们学习后端（node）的过程中，要时常和数据库打交道，所以说我们打通node、MySQLJavaScript实际上是对客户端、服务器、数据库的一个简单打通，有利于后面更加细致的学习node相关知识。mysql基本的增删改查1.在数据中插入数据,value里面是插入的数据insert into students values(NULL,“王刚”,“男”,20,“12345678”);2.查询数据库 查询所有数据select * from students;where后面是查询的条件s
2020-07-28 20:35:00
166
原创 ES6中的类
导言在原生的JS里面，没有类这个概念,他是ES5封装的函数，从本质上讲，他还是函数。ES6 的class可以看作只是一个语法糖与传统的构造函数相比传统构造函数的缺点：构造函数和原型方法及属性分离 不便于维护 降低可读性原型对象可以被遍历修改默认情况下构造函数可以被当做普通的函数进行调用 功能性不明确原型中的方法也可以作为构造函数来用下面是一个传统的构造函数function Student(name, age) { this.name = name; this.age
2020-07-21 18:27:44
159
原创 ES6集合
导言ES6提供的了几个新的数据结构（集合）Set、Map、WeakSet 、WeakMap，下面我来分析一下它们的不同Set集合他类似于数组，但是他的成员的值具有唯一性，没有重复的值特点1.Set本身是一个构造函数，能够使用new关键字创建2.Set数据类型里面的值具有唯一性var set = new Set([1,2,3,2,1]);console.log(set)//[1,2,3]注意：Set集合只能接受可迭代的数据作为初始化数据（只有数组和字符串以及伪数组），对象不可
2020-07-21 13:04:50
329
原创 js继承的方式
js的继承实现的方式具体可以分为6种以下面的构造函数为例function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sleep = function() { console.log(this.name + "每天都要睡觉"); }}Person.prototype.run = function() { console.l
2020-07-20 20:33:18
140
原创 原生Ajax和jQuery的Ajax
概要AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。原生AJAX原生ajax的五个步骤<script> var xhr = new XMLHttpRequest(); //创建一个异步对象 xhr.open("Get"，"test.ashx"， true);//Get方式括号中的三个参数分别为：1.发送请求的方式 2.样请求的页面 3.是否异步 //xh
2020-07-08 13:55:14
159
原创 深克隆和浅克隆
概括：深拷贝和浅拷贝 的主要区别就是：复制的是引用(地址)还是复制的是实例。深拷贝：主要复制的是实例，改变原对象，拷贝的对象的内容不会随之改变，深拷贝主要针对的是的例如Object，Array的复杂数据浅拷贝：主要复制的是引用的地址，改变原对象，拷贝的对象会随之改变浅拷贝数组的concat，对象的assign拷贝concat看起来很像深拷贝，但是实质上他还是浅拷贝，在Array.prototype.cancat 拷贝出来数组中的对象还是共享同一内存地址，所以本质上归属浅拷贝<script&
2020-07-07 21:23:41
260
原创 jQuery案例：美女画廊
下面是我用jQueryjQuery的属性的获取和设置写的一个小案例：美女画廊html部分<div id="dv"> <h1>美女画廊</h1> <a href="img/1.jpg" title="美女A"> <img src="img/1-small.jpg" alt="" title="美女A"> </a> <a href="img/2.jpg" title="美女B"> <img src=
2020-05-17 10:15:12
796
原创 jQuery 操作 HTML 元素和属性的方法
一、获取HTML 元素的内容和属性(1) 获得内容1.text() 设置或返回所选元素的文本内容参数：不给任何参数，就是获取文本内容给参数，就是设置文本内容 $(function(){ $("#getBtn").click(function(){ // 获取这个div的文本 var text = $(".div1").text(); console.log(text); }) $("#setBtn").click(
2020-05-17 09:52:39
497
原创 canvas的转换方法
导言：在画布中我们需要对绘制的图像进行移动，那么下面就是canvas来提供的一些方法一、 translate() 平移translate(x,y) 重新映射画布上的 (0,0) 位置x 沿x轴平移的距离y 沿y轴平移的距离注意：translate平移的是原点，而不是直接平移线条。cxt.beginPath();cxt.moveTo(0,0);cxt.lineTo(100,100);cxt.stroke();// cxt.tran
2020-05-10 17:09:54
441
原创 canvas小案例：钟表绘制
标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 <script> // 获取canvas元素 var canvas = document.getElementById("mycanvas"); // 设置绘制环境 var ctx = canvas.getContext("2d"); </script>下面是一个canvasz综合小案例：绘制钟表，这里用到了很多canvas里的知识：平移（translate）、旋转（rot.
2020-05-10 15:46:33
273
原创 用Bootstrap写表单
一、表单在一个网站中登录注册都会用到表单，下面我们来看看在boostrap中表单的使用。1、表单的布局垂直表单（默认）<form role="form"> <div class="form-group"> <label for="name">name</label> <input type="text" clas...
2020-05-05 21:55:31
691
原创 栅格系统
栅格系统1、什么是栅格系统Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列，通过列数的定义来模块化页面布局。2、栅格系统参数3、工作原理栅格系统用于通过一系列row与列colum的组合来创建页面布局。“行（row）”必须包含在.container（固定宽度）或.container-fluid...
2020-05-05 20:01:06
1662
原创 vscode中安装boostrap插件及使用
一、安装boostrap插件我现在使用的是编程软件是Visual Studio Code，今天就着重讲讲在其中安装boostrap的步骤：1、直接在应用商店中搜索Bootstrap 3 Snippets，下载安装就好了在Visual Studio Code中安装插件可比其他软件简单多了。boostrap的基本使用插件安装好了，下面我们开始简单的使用1、新建一个html文件在页面中输...
2020-05-05 15:39:03
6938
1
原创 媒体查询@media
一.什么是媒体查询媒体查询 : 可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS 样式， 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。 媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。 使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。...
2020-05-05 13:24:12
679
原创 css3:animation属性
一、概述css3的animation属性可以制作动画效果，类似flash，他是通过关键帧来控制动画的每一步，达到让“动”起来的效果。animation的使用方法：定义动画 @keyframes 定义关键帧动画使用动画 利用animation属性调用定义好的动画。兼容性问题这个属性有兼用性问题，需要做兼容性处理InternetExplorer10、Firefox以及Opera浏览器...
2020-04-27 07:20:29
1228
原创 css3中的动画特效案例
引言最近学完css3的知识，下面做了几个有趣案例，来帮助自己熟悉css3的知识。一、升空的孔明灯<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>孔明灯</title> <style> *{ ...
2020-04-26 23:53:41
1862
css3之2D转换
2D转换1、含义：CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。2、什么是CSS3 转换？转换的效果是让某个元素改变形状，大小和位置。2D转换的语法和方法案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...
2020-04-20 07:45:24
188
原创 css3新增属性--圆角
导言像对于css而言，css3中又新增了许多选择器和属性，今天我们重点来看看css3中新增的属性中的圆角。一、border-radius(圆角)border-radius:top-left、top-right、bottom-right、bottom-left ;平常有下面几种写法：只有一个值，四个圆角相等。有两个值，那么 top-left 等于 bottom-right，并且取第一个...
2020-04-19 23:10:47
434
原创 百度API的使用
一、百度API简介前言：随着互联网行业的快速发展，人们对定位服务的需求日益增强，例如：美团、快递、滴滴、共享单车等服务行业。Web服务API：百度地图Web服务API为开发者提供http/https接口，即开发者通过http/https形式发起检索请求，获取返回json或xml格式的检索数据。用户可以基于此开发JavaScript、C#、C++、Java等语言的地图应用。二、百度API的使...
2020-04-13 08:05:20
1905
原创 ES6 新增数组API
一、静态方法(一)、Array.from(arg)1、用法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象。<script> const divs = document.getElementsByTagName("div"); // 类数组 const result = Array.from(...
2020-04-06 08:51:57
301
原创 HTML5 画布（canvas）
一、HTML5画布介绍HTML5 标签用于通过脚本（通常是JavaScript）动态绘制图形。 canvas本身元素没有绘图功能，它只是图形的容器， 您必须使用脚本来实际绘制图形。 getContext()方法返回一个对象，该对象提供在画布上绘制的方法和属性。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。<canvas id="roundness" width="6...
2020-04-06 07:35:45
456
原创 迭代器
一、迭代昰什么？从一个数据集合中按照一定的顺序，不断的取出数据的过程迭代与遍历的区别 ：迭代强调的是依次取出，不能确定取出的有多少，也不能保证把数据全部取完迭代器的特点：迭代器有得到下一个数据的能力判断是否有后续数据的能力数组存储的数据是有限的，迭代器只关心下一个二、语法迭代器是一个特殊的对象，它具有一些专门为迭代过程设计的专有接口，所有迭代器都有一个 next() 方...
2020-03-30 12:50:11
162
原创 ES6新增语法
一、ES6的简介ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企变量业级开发语言。二、ES6常量和变量1、let变量.let声明的变量不会挂在window中，不会造成全局变量的污染.新增了一个块级作用域{}...
2020-03-22 11:19:36
240
JS的异步与加载时间线
一、JS同步和异步1、同步模式：又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续文件的加载、渲染、代码执行（即如果加载到js文件要等到文件加载完成后执行，才能继续执行后面的代码）。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把 < script > 标签放在< body&g...
2020-03-11 19:03:55
208
作用域链和原型链
一.原型链与作用域链区别：作用域是对于变量而言，原型链是对于对象的属性。作用域链顶层是window，原型链顶层是Object。联系：从链表开头寻找，直到找到为止。二、作用域链作用域作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。作用域分为全局作用域和局部作用域全局作用域：任何地方都能访问到的对象拥有全局作用域。局部作用域：局部作用域一般只在固定...
2020-02-13 13:25:37
2194
原创 JS函数面试题1
function add(n) {n = n+1; }y = add(x); //2function add(n) {n = n + 3;}z = add(x); ////问执行完毕后 x, y, z 的值分别是多少？//x 1//y undefined// z undefined//函数表达式没有return 所以为undefined...
2020-02-07 15:31:28
817
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人