理想三殉-CSDN博客

原创 iframe的优缺点

iframe的优点：iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。iframe的缺点：会产生很多页面，不容易管理。iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、

2021-06-14 20:28:57 152

原创 element-ui 中el-form 表单如何校验

我们在使用element-ui中的form表单做一些简单校验时先看官方文档api自带的rules就是验证的规则有两种方法一种是写在js代码中trigger代表在什么时候触发验证message代表出发验证时提示内容type代表验证的格式例如 “string” “number” “eamil”…之类min: 3, max: 5 代表最小长度和最大长度required代表是否开始判空验证 rules: { name: [ { requi

2021-06-07 21:40:03 1589

原创 windows安装nginx

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

2021-06-07 11:45:22 126

原创 webpack打包优化

Ⅰ、webpack打包作用① 提高打包速度② 减小项目体积、提高首屏加载速度③ 提高用户体验Ⅱ、项目开始时：①、配置proxy跨域module.exports = { publicPath: "./", devServer: { open: true,// 自动启动浏览器 proxy: { "/api": { target: "http://47.115.85.237:3000/", // 线上后端地址 changeOrigin

2021-06-06 19:22:31 119

原创 vue-router的鉴权守卫

vue-router鉴权的方式1、通过vue-router addRoutes 方法通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！2、通过vue-router beforeEach 钩子限制路由跳转通过

2021-06-06 19:14:22 214

原创 axios拦截，api统一管理

1.首先新建两个文件用来封装我们的axios拦截和api2.在request文件中将我们需要使用的工具引入因为我们是移动端开发，所以将toast动画按需引入进来，3.创建axios实例设置baseURL还有超时时间4.设置我们的请求拦截在请求拦截里边做一些操作开启loding动画的效果判断vuex有没有token 有的话将他存进请求头最后将config返回出去后边再协商请求失败执行的方法5.响应拦截响应拦截中也有对应要进行的操作根据后台返回的参数是否存在tok

2021-06-03 21:06:10 44

原创 vant-ui 按需引入

1.安装vant在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：Vue 2 项目，安装 Vant 2：npm i vant -SVue 3 项目，安装 Vant 3：npm i vant@next -S2.引入组件根据官方文档给出的三种方法安装自动按需引入(官方推荐)安装插件npm i babel-plugin-import -D// 在.babelrc 中添加配置// 注意：webpack 1 无需设置 libraryDirectory{ "

2021-06-03 19:49:58 107

原创去哪儿项目开发过程

1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2. 搭建项目yarn，npm(cnpm) 包管理工具 yarn add axios -S cnpm install axios -S-S: --save-dev 生产环境的依赖（dependencies）-D: --dev 开发环境的依赖（devDependencies）2.1 从0搭建，指令vue c

2021-06-02 21:38:46 57

原创多环境变量配置

package…json里的scripts配置serce stage build,通过- -mode xxx来执行不同环境通过npm run serve启动本地，执行development通过npm run stage打包测试，执行stageing通过npm run build打包正式，执行production"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cli-service build --

2021-06-02 09:40:18 74

原创 css3中的transition属性

一、语法transition: property duration timing-function delaytransition属性是个复合属性，她包括以下几个子属性：transition-property ：规定设置过渡效果的css属性名称transition-duration ：规定完成过渡效果需要多少秒或毫秒transition-timing-function ：指定过渡函数，规定速度效果的速度曲线transition-delay ：指定开始出现的延迟时间默认值分别为：all 0

2021-06-01 20:44:41 267

原创 vue中keep-alive概念

概念 keep-alive是vue中的内置组件，当它被动态包裹时会缓存不活动的实例，而不是销毁它们。和transition相似，keep-alive是一个抽象的组件，它自身不并会渲染成一个DOM，也不会出现在父组件链中。作用在组件切换的过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间以及性能的消耗，提高用户的体验原理在created函数调用时将需要缓存的 VNode 节点保存在this.cache中/在render(页面渲染)时，如果VNode的name 符合缓存条件（可以用i

2021-06-01 20:31:03 87

原创 js中的事件委托

基本概念委托事件，又名事件代理。事件委托就是通过事件冒泡，把子元素上的事件委托给父元素。阻止事件冒泡就没办法实现事件委托了。事件委托的优点减少内存占用，减少事件注册。新增元素实现动态绑定事件应用的场景事件冒泡，当触发子元素的事件时，通过冒泡将事件传递给父元素，父元上绑定有处理程序，进而触发使用背景事件委托通常用在导航列表中在这里插入代码片 <ul id="my-ul"> <li onclick="alertText(this)">1</li&

2021-05-30 20:28:57 253

原创闭包的概念

闭包function fn(){var a=100;function fc(){alert(a);// }} 通俗的说就是函数中嵌套了一个函数，函数内部可以访问外部函数的变量优点：这个变量在外层函数执行完不被销毁，因为它被其他函数使用了缺点：闭包会吧函数中的变量保存到内存中，内存消耗大，不能频繁用闭包，频繁的使用会造成页面性能问题，会导致内存泄漏。解决的办法是在退出闭包函数之前，将不使用的变量全部删除闭包的作用可以读取函数内部的局部变量可以让这些变量的值

2021-05-30 20:14:00 85

原创 let、const、var 的区别

在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点（内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量，下面有介绍），ES6提出了使用let和const声明变量,弥补了ES5中var的缺点1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。con

2021-05-30 19:39:33 60

原创 this指向 ,new的过程

this的指向问题使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。一、普通函数调用这个情况没特殊意外，就是指向全局对象-window。/*普通函数调用*///使用let let username = "123";function fn(){ console.log(this.username); //undefined}fn();

2021-05-27 21:17:16 90

原创作用域作用域链自由变量变量提升

1.作用域每一个变量、函数都有其作用的范围，超出作用不得使用，这个叫做作用域。在javascript中，其对作用域的划分都是通过函数function来实现的，在函数内部的区域，我们就称之为“局部作用域”，在函数外部的区域，我们就称之为“全局作用域”es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）例如：2.自由变量自由变量的概念：当前作用域没有定义的变量3.作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作用域，就形成了

2021-05-27 20:59:08 79

原创 this与call/apply/bind的关系

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

2021-05-26 20:31:45 65

原创 javascript原型、原型链

什么是原型？JavaScript是一种简易的脚本语言，其是由对象构成。每一个JavaScript对象（除null外）都和另一个对象相关联，“另一个”对象就是原型。也就是说，任何一个对象都有原型这个属性。1. prototype每个函数都有一个prototype属性，被称为显示原型1. 2._ proto _每个实例对象都会有_ proto _属性,其被称为隐式原型每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype显示原型（prototype）：每一个函

2021-05-26 20:18:43 43

原创数组常用方法 es4 es5 es6

数组1 什么是数组存储一组关联数据2 数组定义方式数组直接量（常用）var arr = [] ;var arr2 = [10,20,30];2 . 通过 new 创建var arr3 = new Array()；var arr4 = new Array(10,20,30)console.log(arr4) // [ 10, 20, 30 ]3 数组访问数组名[下标] 下标0 1 2 3 …数组长度可以通过数组名.length访问4 数组元素的遍历1、for 循环for

2021-05-25 16:49:37 87

原创数据类型

JavaScript数据类型详解在对js的数据类型有一定的了解之后，我们还有一些对各类数据类型有一些要注意的点。对于不知道是什么类型的数据，我们可以利用关键字 typeof查看数据原型可以利用.proto 查看最后一个属性 __proto__可以得知数据类型地原型一、字符串var str='123456'方法描述str.length获得数组长度。str.slice(num1,num2)切割，num1为开始的字符的下标，num2为切割的字符串的长度（切割后的字符

2021-05-24 20:32:36 51

原创 js数据类型判断

判断数据类型的四种方法在 ECMAScript 规范中，共定义了 7 种数据类型，分为基本类型和引用类型两大类，如下所示：基本类型：String、Number、Boolean、Symbol、Undefined、Null引用类型：Object object又分为(Function 、Array、RegExp、Date)基本类型也称为简单类型，由于其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈中，即按值访问。引用类型也称为复杂类型，由于其值的大小会改变，所以不能将其存放

2021-05-24 20:15:47 39

原创深拷贝

深拷贝将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，假如属性是引用类型，则拷贝的是内存地址。因此如果其中一个对象改变了这个地址，就会影响到另一个对象。处。浅拷贝let target = {};let sources = {a:{b:2}};Object.assign(target,sources);target.a === so

2021-05-23 20:32:01 45

原创 vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；先说一下两种模式默认是hash模式，也就是会出现如下的URL：在这里插入图片描述，URL中带有#号，我们可以用如下代码修改成history模式：import Vue from 'vue'import Router from 'vue-router'import Main fro

2021-05-23 20:24:53 92

原创 vuex概念

1.vuex的基本概念组成Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex的组成上图看出，vuex分为5部分1）statestate是存储的单一状态，是存储的基本数据。2）Gettersgetters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。3）

2021-05-23 20:12:53 83

原创生命周期函数

生命周期（钩子函数）一、生命周期过程解释实例创建之后，初始化事件和生命周期，而后触发beforeCreate。beforeCreate，当前实例创建之前，很少操作，一般用于加载动画，比如创建一个菊花旋转。created表示当前实例创建完成，组件、属性等初始化完成，一般封装一个方法，比如getDataFromNetwork，从网络请求数据。this.getDataFromNetwork()调用，触发回调，关闭beforeCreated中的菊花加载动画。当前实例创建完成，页面还未渲染未显示，拿不到DOM元素

2021-05-20 21:52:51 150

weixin_57980265的博客