- 博客(42)
- 收藏
- 关注
RSS订阅原创 Vue中axios踩坑POST传参
vue axios解决post传参数问题vue框架推荐使用axios来发送ajax请求,最近写项目时使用了post方法，结果发现后台（node.js）完全拿不到前台传来的参数。后来进过一番探索，终于发现问题所在。// 官方实例：axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); })
2020-09-01 20:03:35
3716
原创 在vue-cli脚手架中使用vue-router
在vue-cli脚手架中使用vue-router不要忘记安装vue-router1, 在src 目录下新建两个组件，home.vue 和 about.vue<template> <div> <h1>home</h1> <p>{{msg}}</p> </div></template><script> export default {
2020-08-31 20:40:53
669
原创 vue-router的基本介绍
vue-router什么是路由路由是一个网络工程里面的术语路由就是通过网络把信息从源地址传输到目的地的活动 — 维基百科后端路由是url和后端逻辑的对应关系前端路由是url和组件的对应关系前端路由核心就是改变url但是页面不进行整体的刷新前端路由规则url的hashurl的hash也就是锚点(#),本质上是改变window.location的href属性我们可以直接通过location.hash来改变href 但不刷新页面vue-routervue-router是vue官方的路
2020-08-26 00:14:02
695
原创 js中的map，filter，reduce
mapmap 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。let arr = [1,2,3]let newArr = arr.map(item => item + 1)console.log(newArr)//[2,3,4]另外 map 的回调函数接受三个参数，分别是当前索引元素，索引，原数组。filterfilter 的作用也是生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素。 l
2020-08-25 19:54:22
1632
原创 Nodejs入门
1.Nodejs简介什么是nodejs?Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 v8解析js是最快的nodejs是让js运行在服务器端nodejs里面的API大多数都是异步服务器端的js和浏览器端的js有什么区别?客户端的js三个组成部分 :DOM 文档对象模型 js操作网页内容的一套APIBOM 浏览器对象模型 js操作浏览器页面的一套APIECMAScript 一套js语法的规范 for服务端的js 只有ECMAScript 独立于浏览
2020-08-11 23:35:31
107
原创 使用express搭建服务器
1.Express介绍介绍 Express是基于Nodejs平台的，快速、开放、极简的web开发框架 可以帮助我们快速搭建后台服务器，快速处理post请求，快速处理静态功能官网地址：https://www.expressjs.com.cn下载使用npm下载npm install express使用demo:// 引入expressconst express = require("express");// 创建服务器对象const app = express();//
2020-08-11 23:13:01
1696
原创 防抖和节流
防抖 debounce函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。防抖的原理：你尽管触发事件，但是我一定在事件触发的n秒后才执行，如果你在触发事件n秒内又触发了这个事件，那我就以新事件的时间为准，n秒后在执行典型应用百度搜索框在输入稍有停顿时才更新推荐热词。// 频繁触发时，清楚对应的定时器，然后再开一个定时器，delay秒后执行function debounce(handler, delay) { delay = delay || 300; v
2020-08-04 22:09:48
228
原创 js数组去重的多种方法
1.双层循环 function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) {//遍历数组 for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) {//将外层循环的当前元素与后面所有元素比，若有相同的元素，跳出
2020-08-03 20:23:44
172
原创 ES6新增内容3(set,map数据结构，promise)
Set数据结构ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。set中的方法增 add(数据) 添加一个数据到集合末尾 如果数字原本存在 就不进行操作var s = new Set();s.add(1)s.add(2)s.add(2) // 集合里面已经有的数据 再添加 就是无效添加s.add(3)s.add(3)s.add(4)s.add(5)console.log(s); //
2020-07-28 22:52:38
141
原创 ES6新增语法2
字符串新增APIindexOf查找字符串中是否包含某个字符串参数1 需要查询的目标字符串参数2 开始查询的索引(默认为0)var str = "abcd abcd";console.log(str.indexOf("bc")); // 1console.log(str.indexOf("bc",3)); // 6console.log(str.indexOf("bd")); // -1includes()检测字符串或数组中是否包含某一个子字符
2020-07-28 20:17:51
178
原创 ES6基础语法
ES6 ES6 ECMAScipt 第六版 ECMAScript 是js的一套标准化设置 ES6内容 1.声明变量的方法 let const 2.变量的结构赋值 3.扩展运算符 4.数据劫持 箭头函数 5.set map 6.数组 对象 数值的扩展 7.Promise对象 8.Generator函数let,constlet const 是es6新增的语法作用：用
2020-07-20 23:39:26
277
原创 html5新增内容(canvas)
canvashtml5中提供了强大的图形处理功能canvas画布 canvas 画布步骤 1.获取canvas 元素 2.搭建canvas绘制环境(所有的绘制行为都是在这个环境下进行) 3.在内存绘制(仅仅在内存中) 4.绘制到页面上(调用stroke方法)<canvas id="myCanvas" width="200" height="200"> 您的浏览器版本过低，请更新浏览器</canvas>
2020-07-20 23:37:44
205
原创 html5新增内容(一)
H5C3html5语义化标签H5专门规定的布局标签头部 header导航区 nav主体部分 main小模块 section边栏框 aside正文框 article尾部区域 footer语义化的标签，旨在让标签有自己的含义。优势：1.代码结构清晰，方便阅读，有利于团队合作开发。2.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。3.有利于搜索引擎优化（SEO）。IE8不兼容h5新标签可以使用 html5shiv.js 兼容<!-- css H
2020-07-12 22:36:00
824
原创 Ajax的使用和同源跨域的解决
Ajax概念Ajax 即“AsynchronousJavascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax请求的步骤(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象；(2)创建一个新的HTTP请求,并指定
2020-07-12 22:22:55
411
原创 bootstrap响应式开发与栅格系统
响应式开发原理响应式开发 使用媒体查询 @media css3属性通过媒体查询 判断屏幕大小 决定使用什么布局/* 媒体查询里面 是一个独立的css语法环境 */@media(判断条件){ // min-width max-width width 元素样式} 手机 width < 768px 平板 width > 768px && width < 992
2020-07-08 13:47:10
353
原创 js中的继承
继承(es6之前的继承，es6继承之后补充)1.使用构造函数来实现继承// 实现方式 ： 使用call等方法 使一个对象的this指向另一个对象 从而让其拥有这个对象的属性和方法function Parent(name, age) { this.name = name; this.age = age; this.work = function () { console.log("挣钱养家"); }}function Child(name, age)
2020-07-05 15:30:39
123
原创 js中原型，原型链
原型 prototype1.每一个构造函数被创建，系统都会自动创建一个与构造函数相对应的prototype对象，这个对象叫做原型2.访问原型的对象方法 构造函数.prototype3.构造函数的原型是一个对象 可以添加属性和方法4.往原型中添加的方法该构造函数实例化的对象可以访问function Person(name,age){ this.name = name; this.age = age;}Person.prototype.sayHi = function(){
2020-07-05 15:23:46
165
原创 jQuery入门(二)
jQuery操作类 // 1.添加类$(".box").addClass("类名")// 一次性添加多个类 添加的类 全部写在一个字符串里用空格隔开// 与classList添加类区别 ：classList() 是传多个字符串参数 参数间用逗号隔开 // 2.移出类$(".box").removeClass("w300 h300");// 不传参 表示移出所有类 包括原本的样式 // 3.判断类$(".box").hasClass("类名")// 判断元素是否拥有某个类
2020-05-16 22:34:04
153
原创 js中this指向问题
函数执行的三种方式中this指向这些this指向，是当我们调用函数时确定的，调用方式的不同决定了this的指向不同一般this指向调用者1.调用普通函数作为普通函数调用时this指向全局对象window function fun(){ console.log(this); //window } fun(); // window...
2020-05-16 21:54:36
103
原创 js中的作用域和闭包
js中的作用域作用域是变量和函数能起作用的范围，在 ES6之前只有全局作用域和局部作用域全局作用域：变量和函数在整个script内都能调用 var a = 10; function fn(){ console.log(a); } fn();//10局部作用域：作用于函数内部，函数外部不能调用 function ...
2020-05-16 21:54:21
71
原创 js中== 和 != 的转换规则
== 和 != 基本转换规则1.如果有一个操作数是布尔型，在比较相等性之前先转换数值 false–0 true–12.如果有一个操作数是字符串，另一个为数值，在比较相等性之前先将字符串转换数值 不为数值NaN3.如果有一个数为对象，另一个不是，则先调用对象的valueOf()方法，得到基本数据类型值按照之前规则比较这两个操作符在进行比较时要遵循以下规则1.null == unde...
2020-05-16 21:54:09
589
原创 js对象
对象的概念js中的对象是一种无序属性的集合，属性由键值对构成对象的创建1.对象字面量var obj = { name : "小张", age : 18, work : function(){ console.log("程序员"); } }2.构...
2020-05-16 21:53:52
106
原创 js中的事件冒泡和事件捕获
事件传播的机制(冒泡和捕获) 事件冒泡和事件捕获的区别事件捕获（event capturing）：当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。事件冒泡可...
2020-05-16 21:53:03
174
原创 jQuery入门
jQuery简介jQuery是一个快速，小型功能丰富的JavaScript库 它使用一个在多种浏览器上工作的易于使用的API使得HTML文档遍历和操作 事件处理 动画 Ajax等工作更简单 随着多功能性和可扩展性结合jQuery改变了数百万人编写Js的方式jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插
2020-05-16 21:51:14
274
原创 原生js实现无缝轮播图
这里使用匀速动画方法实现轮播图效果animate.js部分// 匀速动画方法function Animation(ele, target) { // 先清除动画 clearInterval(ele.tid); // 获取当前位置 var currentLeft = ele.offsetLeft; // 判断左移右移 var isLeft = (...
2020-04-12 14:12:36
215
原创 原生js实现简单动画效果
使用原生js实现简单动画效果实现动画效果可以用jQuery提供的animate方法，或一些插件来实现，但是随着前端组件化开发的流行，jQuery大量的DOM操作已经显得十分多余，正在逐渐从前端技术栈中被淘汰，下面我们使用原生js实现简单的匀速动画效果和缓动效果匀速动画实现水平移动css样式<style> #box { width: 10...
2020-04-12 13:48:04
1808
原创 js深拷贝与浅拷贝
浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用 var obj = { id: 1, name: "andy", msg:{ age:18 } } var o = {}; for (var k in obj) { ...
2020-04-12 13:06:47
107
原创 js中的事件委托
事件委托事件委托也称事件代理，在jQuery中称为事件委派原理：在元素父节点上设置事件监听，利用冒泡原理影响设置的每一个子节点，利用事件对象的target来找到要触发事件的子节点事件委托作用：在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的...
2020-03-23 13:12:03
130
原创 js中的BOM操作(二)
四、navigator对象window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。Navigator 对象的属性1、Navigator.userAgentnavigator.userAgent属性返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息。下面是 Chrome 浏览器的userAgent...
2020-03-22 14:24:21
143
原创 js中的BOM操作(一)
JavaScript中的BOM操作BOM：浏览器对象模型（Browser Object Model，简称 BOM）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作一、Window对象浏览器窗口特点1.对于全局变量或全局方法，在取值或调用时可以省略var a = 10;console.log(a); //10consol...
2020-03-22 14:23:40
306
原创 js操作元素属性
js元素属性：行内标准样式行内自定义属性行外样式js动态添加的属性点语法获取元素属性1.可以获取标准属性(主要)2.可以获取点语法动态添加的属性3.无法获取行内自定义属性4.无法获取行外属性//style属性是一个对象 存储的是元素的样式console.log(box.style); //color属性在行外样式表中定义console.log(box.style.co...
2020-03-15 14:00:15
589
1
原创 js中的节点操作
节点概述网页中所有的内容都是节点(标签，属性，文本，注释等)每一个节点都有nodeType属性，nodeName属性和nodeValue属性常用的节点 元素节点 nodeType: 1 nodeName: 大写的标签名 nodeValue: null 属性节点 no...
2020-03-15 13:43:09
213
原创 js数据类型转换
说到数据类型转换就要先了解都有哪些数据类型JS基本类型（值类型）：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol（Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。）typeof 返回值只有六种null 是特殊的对象//number boolean undefined strin...
2020-03-15 13:40:05
124
原创 CSS水平垂直居中布局
在日常开发中，经常会遇到要求水平垂直居中效果实现水平垂直居中也是面试高频考点 水平垂直居中又分两种情况 1.内容定宽高 2.内容不定宽高内容定宽高1.绝对定位和负margin值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit...
2019-12-24 20:15:05
80
原创 消除display: inline-block 元素间的换行符空格间隙问题。
消除display: inline-block 元素间的换行符空格间隙的方法想把一些元素在一行显示，最简单的方法是display:inline-block;变成行内块元素但是同行显示的inline-block元素之间会有一个换行符，一般占据4px位置(例如Chrome浏览器 字体默认大小16px,行内块元素间隔4px,字体大小越大间隔越大)<!DOCTYPE html><...
2019-12-16 20:05:02
920
1
原创 总结一下css选择器
css基础选择器一、标签选择器：标签选择器是直接将HTML标签作为选择器,如：p{font:14px;}二、id选择器：给页面元素定义id。#div1{margin:0 auto;background:#ccc;color:#c00;}三、类(class)选择器：在CSS里用一个点开头表示类别选择器定义，例如：.div1{color:#f60;font-size:14...
2019-12-10 00:12:34
79
原创 前端新手上路之css篇(三栏布局)
三栏布局三列布局要求： 1.两边固定，中间自适应 2. 中间列要完整显示 3.中间列要优先加载1.两边浮动，中间用margin隔开浮动会脱离文档流，不能浮到前面的元素上面，所以只能把中间列放在最后<!DOCTYPE html><html> <head> <meta charset="utf-8" /&...
2019-12-09 23:28:32
156
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人