派大星儿的博客

输入URL 到页面加载完中间发生了什么?大致过程是这样的：1.DNS 解析 ，就是解析地址就是ip地址2.TCP 连接3.发送 HTTP 请求4.服务器处理请求并返回需要的数据5.浏览器解析渲染页面6.连接结束注：这里会延伸出问 http 状态码，和三次握手和四次挥手相关问题：（1）http 状态码：1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码2xx （成功）表示成功处理了请求的状态码。常见的 2 开头的状态码有： - 200 – 服务器成功返回网页3xx

前端开发规范1 项目结构规范应用根据技术选型，统一关键目录，例如 compile 目录。Vue SPA 应用| — compile| — deploy.sh（发布平台发布脚本）| — build.sh（发布平台构建脚本）| — src| — build| — config| — test| — package.json| — README.mdVue SSR 应用| — compile| — deploy.sh（发布平台发布脚本）| — build.sh（发布平台构建脚本）

21额25555

一、项目概述1.1电商项目基本业务概述根据不同的应用场景，电商系统一般提供了pc端、移动端APP、移动端Web、微信小程序等多种终端的访问方式1.2电商后台管理系统的功能电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。1.3电商后台管理系统的开发模式（前后端分离）电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于Vue 技术栈的SPA 项目。1.4电商后台管理系统的技术选型二、项目初始化2.1 前端项目初始化步骤安装Vue 脚手架

概念：debounce 防抖 、 throttle 节流节流节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。使用时间戳：让我们来看第一种方法：使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如

​ 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发s在这里插入代码片etter，那么就能监听到了数据变化​ 第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化

vue+Element实现tree树形数据展示组件： Element（地址：http://element.eleme.io/#/zh-CN/component/tree）：Tree树形控件复制代码<el-tree ref="expandMenuList" class="expand-tree" :data="setTree" highlight-current :props="defaultProps" :expand-on

宏任务和微任务到底是什么？这个就涉及到JavaScript事件轮询中的宏任务和微任务。那么，你能说清楚到底宏任务和微任务是什么？是谁发起的？为什么微任务的执行要先于宏任务呢？首先，我们需要先知道JS运行机制。JS运行机制概念1： JS是单线程执行”JS是单线程的”指的是JS 引擎线程。在浏览器环境中，有JS 引擎线程和渲染线程，且两个线程互斥。Node环境中，只有JS 线程。概念2：宿主JS运行的环境。一般为浏览器或者Node。概念3：执行栈是一个存储函数调用的栈结构，遵循先进后

项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 >>> , less/sass : /deep/）解决方法：1、在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。——————可以解决问题——————缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变。2、scss 模式 使用 >>> 箭头穿透父类（或者更高级）

首先创建 一个 http 文件 （看自己 习惯）然后 创建 request.js 文件import Axios from "axios";//引入axiosimport store from "../store";//引入 vueximport router from "../router";//引入路由var baseURL = `https://www.liulongbin.top:8888/api/private/v1/`;//基本域名const instance = A

elemeng-ui 中el-form 表单如何校验表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。ElementUI校验规则ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足

Windows下安装Nginx前言Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站　点（俄文：Рамблер）开发的它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。安装步骤1、下载Nginx下载地址：http://nginx.org/en/downlo

路由导航守卫导航守卫就是路由跳转过程中的一些钩子函数。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局路由守卫，组件路由守卫，路由独享守卫。每个守卫方法接受三个参数：作用：守卫页面跳转 监听页面跳转 在页面跳转前或者跳转后执行一些操作。路由的钩子函数 有三个参数 分别是 to到哪儿去 from 从哪儿来next执行下一步to：即将要进入的目标路由对象from：当前导航正要离开的路由next：执行下一步（必须要调用该方法）next()

vant-ui 按需引入前言：之前写的都是全局引入，之后为了提高性能，我们使用按需引入，需要那个就引入那个。一、安装我们可以通过yarn来安装，速度快yarn add vant -S二、按需导入安装插件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式命令：yarn add babel-plugin-import -D 或者 npm i babel-plugin-import -D安装之后，找到我们的 babe

一、前言axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。推荐我们使用axios库二、axios封装步骤1.安装axiosnpm install axios -S; // 安装axios复制代码2.目录创建一般我会在项目的

什么是 webpack ?本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给

多环境变量配置在项目上线之前 我们要 经过开发 和 试错测试所以 写项目的时候会有三个基本接口也就是域名：团队开发的时候 就会 有自己的域名：开发环境当我们写完项目得的时候 域名 就会发生改变：测试环境测试通过后就会准备上线项目 就会有上线的域名：生产环境的、在项目的根目录下的package.js...

去哪儿项目开发过程1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack+持久化工具2. 搭建项目yarn，npm(cnpm) 包管理工具 【两种模式都可以使用】yarn add axios -Scnpm install axios -S不同环境：-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devD

transitiontransition的作用首先我的理解是transition是作为元素切换时的过渡动画，例如在一个div进行v-if,v-show的时候，他的显示与隐藏分别进行怎样的变幻，都可以由transition进行控制。transition的属性v-enter：元素显示/插入前的效果，例如：transform: translateX(-200%);v-active-enter：元素显示/插入的过渡时间和函数，例如：transition: all 0.3s ease;v-enter-to

keep-alive 的作用keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价离开时调用）kee

vue和微信小程序的区别、比较链接：https://segmentfault.com/a/1190000015684864一、生命周期先贴两张图：vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad: 页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。onShow: 页面显示每次打开页面都会调用一次

call、apply、bind的区别1、call和apply的区别使用场景： 伪数组借用数组方法这里我们使用 arguments（伪数组）、 例:function fu（）{ console.log（argumets）//首先打印一下 伪数组 }fu(2,3，4,5，6) //实参需求：在伪数组中添加 一个数字casll方法：借用数组的方法来操作数组// 只添加一个参数的 时候 Array.prototype.push.call(arguments,100)// 借用

一图搞懂javascript中的this与call/apply/bind的6中关系在浏览器里，在全局范围内this 指向window对象；在函数中，this永远指向最后调用他的那个对象；构造函数中，this指向new出来的那个新的对象；call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；

javascript原型与原型链1.prototype每个函数都有一个prototype属性，被称为显示原型2._ _proto_ _每个实例对象都会有_ proto _属性,其被称为隐式原型每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype3.constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4.原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去

数组常用方法1.push() 添加一个或多个参数到数组的尾部，原来数组会改变，返回的是添加后的数组的长度例：var arr=[1,2,3,4];movePos.shift()console.log(arr) 返回 42.pop() 从数组尾部删除一个元素，原数组会改变，返回的是被删除的元素例：var arr = ["red","green"];var arr2= arr.pop(); // 取得最后一项并移除了alert(arr2); 打印结果 //green3.unshif

arguments 是一个对应于传递给函数的参数的类数组对象。arguments对象是所有（非箭头）函数中都可用的局部变量。 你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。 例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：参数也可以被设置：arguments[1] = 'new value';arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性

七、数据类型判断我们常见的数据类型有两种基本数据类型 和 引用数据类型基本数据类型Number、String、Null、Boolean、undefined、Symbol(ES6新增)引用数据类型Object、Array、Date、Function、Error、RegExp、Math、Number、String、Boolean、Globle通常判断数据的方法有四种typeof、instanceof、constructor、Object.prototype.toString.call()

六、JS数据类型：基础概念请注意：JS的数据类型有8种。在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。JS数据类型：JS 的数据类型有几种？ 8种。Number、Strin

四、vue-router（两种路由模式、编程式/组件式、如何传参(优缺点)、）1.路由原理路由就是用来解析URL实现不同页面之间的跳转我们一步步实现这两种路由，来深入理解下底层的实现原理。我们主要实现以下几个简单的功能：监听路由的变化，当路由发生变化时，可以作出动作；可以前进或者后退；可以配置路由；2.路由的两种模式1.hash模式​：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但

css理论题一、什么是盒模型把所有的网页元素都看成一个盒子，它具有： content，padding ，border，margin 四个属性，这就是盒子模型 盒子模型有两种形式：标准盒子模型，怪异盒子模型两种模式可以利用box-sizing属性进行自行选择：标准模式：box-sizing:content-box;怪异模式：box-sizing:border-box;两种模式的区别：标准模式会被设置的padding撑开而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子，盒子的大小

vue和微信小程序的区别、比较链接：https://segmentfault.com/a/1190000015684864一、生命周期先贴两张图：vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad: 页面加载一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。onShow: 页面显示每次打开页面都会调用一次

组件/标签的变化以前是html标签，现在是小程序标签。div 改成 viewspan、font 改成 texta 改成 navigatorimg 改成 imageinput 还在，但type属性改成了confirmtypeform、button、checkbox、radio、label、textarea、canvas、video这些还在。 select 改成 pickeriframe 改成 web-viewul、li没有了，都用view替代 audio不再推荐使用，改成api

小程序 项目工作的流程一、接口文档二、帮助文档阿里巴巴小程序开发文档阿里巴巴字体库 iconfontmdn三、项目的搭建1、新建小程序项目 填入自己的appid2、搭建自己的项目目录结构 分模块化3、搭建项目需要的页面 注意语义化的的名称方便后期维护 清晰明确的页面分布{ "pages": [ //项目页面的路由信息 "pages/index/index", "pages/category/index", ]}4、引入字体图标库打开阿⾥巴巴字

vue06----portfinder、组件切换（动态组件、路由）、路由的配置项、router-view、router-link、动态导航（params）、编程式导航、声明式导航、路由传参的方式（动态导航、query、params）、命名视图、嵌套路由、node抛出和ES6抛出、浏览器渲染流程、route、route、route、router和routes的区别、better-scroll标签：install 命名 wrapper pat ott 个数端口号问题：vue.config

1、不同组件之间是如何通信的？**请永远牢记vue是单向数据流1.父传子：**在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}父传子<template>//父组件 引用子组件aaa 两种写法传递num1,num2 <div> <aaa v-bind:father1="num1" :father2="

目录Vue2和vue3的区别双向数据绑定原理发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势： 可直接监听数组类型的数据变化 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 可直接实现对象属性的新增/删除 默认使用懒加载 在2.x版本里。不管数据多大，都会在一开始就为其创建观察者，在数据很大时，就会造成性能的问题。 在3.x中，只会对渲染出来的数据创建观察者，而且3.x的观察者更高效。 ..