2020年09月_刚上道的小白_

原创项目上线前的优化

项目上线前的优化根目录下新建vue.config.js，配置开发模式和发布模式的打包入口文件。src文件夹下新建main-prod.js和main-dev.js。复制main.js到这2个文件中。删除main.js。在vue.config.js中添加externals，删除main-prod.js（发布阶段）中对应的css样式表，在index.html中添加相应的css连接和js连接（cnd资源），来减少打包时的体积。module.exports = { chainWebpack: conf

2020-09-24 21:19:06 143

原创 vuejs中虚拟DOM及diff算法

vuejs中虚拟DOM及diff算法虚拟DOM及diff算法虚拟DOM（virtual dom）用一个简单的对象去代替复杂的dom对象，存储了对应dom的一些重要参数，在改变don之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上Diff算法（差异算法）Diff算法（差异算法）：可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把它们应用在真正的DOM树上，页面就变更了，这样就可以做到：视图的结构确实是

2020-09-21 08:41:03 133

原创 vue自定义过滤器filter

vue之filter过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })12

2020-09-21 07:59:31 307

原创 Vue Virtual Dom 和 Diff原理(极简版)

vue的虚拟DOM和diff算法，是Vue面试的最后一招，当然也是极其简单了，先说Virtual Dom，来一句概念：用js来模拟DOM中的节点。传说中的虚拟DOM。再来一张图：　　是不是一下子秒懂没懂再来一张　Virtual Dom就先这样，理解了就OK，下面我们了解一下Diff，老规矩先来一句概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。换句人话diff的过程就是调用名为patch的

2020-09-21 07:56:56 201 1

原创 vue中如何自定义指令directive

vue中如何自定义指令directive背景除了核心功能默认内置的指令 (如v-model 和 v-show等)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。如何自定义指令1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: {

2020-09-21 07:54:22 294

原创 vue自定义指令的应用场景

使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&

2020-09-21 07:49:43 196

原创 vue组件封装

你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组.

2020-09-17 22:19:06 185

原创 vue中事件修饰符

一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<a v-on:click.stop="doThis"></a><!-- 提交事件

2020-09-17 22:14:14 1708 2

原创 Vue双向数据原理

双向数据原理采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调双向数据流程1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observer和Compile的

2020-09-17 07:48:00 408

原创 vue的常用指令

vue的常用指令v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的。v-html指令：绑定一些包含html代码的数据在视图上，例如Daisy,这个字符包含了标签，要想不被当做普通的字符串渲染出来，发挥应有的效果，我们就得使用v-html指令。例如下面的写法，name里面的Daisy外层套上**，用v-html指令后**的功能效果就会正常被渲染出来，从而不会当做字符串被解析出来。********v-show指令：指令的取值为true/false，分别对应着显示/隐

2020-09-16 21:55:55 162

原创 Vue生命周期的执行过程（极简版）

Vue生命周期的执行过程（极简版）简单粗暴的答案直接走起：1、创建vue实例，new Vue();2、在创建Vue实例的时候，执行了init()，在init(初始化)过程中首先调用了beforeCreate钩子函数；3、同时监听data数据，初始化vue内部事件，进行属性和方法的计算；4、以上都干完了，调用Created钩子函数(一般axios请求会在这个周期内进行)；5、模板编译，把data对象里面的数据和vue语法写的模板编译成HTML。编译过程分三种情况：1）实例内部有template属性

2020-09-15 21:20:58 110

原创 v-if与v-show的区别

v-if与v-show的区别一、相同点都可以动态控制着dom元素的显示隐藏一、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的二、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；例如：v-if:在请求后台接口，用接口返回数

2020-09-15 21:19:49 124

原创 axios封装与api接口管理

axios封装与api接口管理一、前言axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库二、axios封装步骤安装axios

2020-09-15 08:17:21 158

原创事件模型

事件模型：1、DOM 0 级模型DOM 0 级模型叫原始事件模型，在这个模型中，事件不会传播，即没有事件流的概念；一、 HTML 代码中直接绑定：<input type='button' onclock='fun()'>1二、通过js代码指定的属性var btn = document.getElementById('.btn')btn.onClick= fun12移除监听函数btn.onClick = null1IE 事件模型：IE事件模型有两

2020-09-13 22:01:11 145

原创事件监听

事件监听和事件模型一、事件监听1、行内绑定行内绑定：在ＨＴＭＬ　的标签中通过onclick属性进行绑定，绑定方式为：on＋　事件名称，　在将所触发你事件赋值给该属性<button onclick='onClick()'></button>2、使用元素进行事件绑定使用element.onclick 进行事件绑定，通过操作DOM元素，为DOM绑定事件【使用形式同行内绑定】window.onload = function (){ let btn = doc

2020-09-13 21:56:58 165

原创垃圾回收及内存泄漏

垃圾回收及内存泄漏1、垃圾回收的策略通常有两中——标记清除和引用计数2、js中最常用的垃圾收集方式是标记清除。但是COM对象（BOM和DOM对象就是使用C++以COM对象的形式实现的）垃圾收集机制采用的就是引用计数策略。使用标记清除的方式，不会引起内存泄漏的问题（哪怕对象相互引用也没有关系）。因为变量离开执行环境就会被回收。现在的浏览器基本不用引用计数，只有早期的ie中com对象是使用引用计数的，现在应该都是使用标记清除，所以不要考虑内存泄漏的问题。3、使用引用计数策略，在函数

2020-09-13 21:26:57 142

原创 javaScript的设计模式

javaScript的设计模式一、什么是设计模式？是一套被反复使用，多数人知晓的，经过分类的，代码设计经验的总结。换言之，就是用 “套路” 做事情。二、什么是模式？模式是一种可以复用的解决方案。模式是指从生产和生活经验中经过抽象和升华提炼出来的核心知识体系。设计模式三大好处模式是已经验证的解决方案模式很容易被复用模式富有表达力三、设计模式分类创建型设计模式说明：专注于处理对象创建的机制，以合适的方式创建对象，以此来降低创建对象过程的复杂性。包含：Constru

2020-09-13 21:02:17 78

原创 js中事件委托

**js中事件委托****概念事件的委托是指利用冒泡的原理，把事件加到父级上，触发执行效果。好处:提高性能案例首先看不使用事件委托时的代码如下：<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> li { list-style: none;

2020-09-10 22:02:42 537

原创 js数组扁平化

**js数组扁平化**数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。var arr = [1, [2, [3, 4]]];//扁平化之后：[1,2,3,4];实现基本方式对数组的每一项进行遍历。判断该项是否是数组。如果该项不是数组则将其直接放进新数组。是数组则回到1，继续迭代。当数组遍历完成，返回这个新数组。1. reduce遍历数组每一项，若值为数组则递归遍历，否则concat。function flatten(arr

2020-09-10 21:35:19 113

原创 js数组去重

**js数组去重**1、 ES6-set使用ES6中的set是最简单的去重方法该方法可以说是最完美的方法，就是需要环境支持ES6var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}]; function arr_unique1(arr){return [...new Set(arr

2020-09-09 22:36:08 103

原创 js中数组排序（冒泡、快速、插入）

**js中数组排序（冒泡、快速、插入）**1.冒泡排序法function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ //把大的数字放到后面 var st

2020-09-09 22:20:32 109

原创 js数组方法整理

join(" ")

2020-09-09 09:12:27 128

原创 ES6数组中的方法

一、fromArray.from的设计目的是快速便捷把一个类似数组的可迭代对象创建成一个新的数组实例。二、of当参数个数大于1时，Array() 才会返回由参数组成的新数组。当参数个数只有一个时，实际上是指定数组的长度。Array.of 总是返回参数值组成的数组。如果没有参数，就返回一个空数组。三、copyWithin可以在当前数组内部，将指定位置的数组项复制到其他位置，会覆盖原数组项，然后返回当前数组。使用该方法会修改当前数组。它接受三个参数： target（必需）：从该位

2020-09-08 22:43:48 168

原创 ES5中数组的方法

**ES5中数组的方法**ES5中数组的方法都有：indexOf、forEach、map、every、some、filter、reduce一、indexOf方法查找数组内指定元素的位置，查到第一个值时返回其索引，没查到返回-1.lastIndexOf(element)为倒序查找二、forEach方法遍历当前数组，参数为一个回调函数，回调有三个值：1、当前元素2、当前元素索引值3、整个数组.forEach(function(e,index,arr){});三、map

2020-09-08 21:46:21 1475

原创 generator（特点，项目应用）

**generator（特点，项目应用）**特点：function 关键字与函数名之间有一个*号；Generator函数内部使用yield表达式，定义内部的不同状态；Generator函数调用不像普通函数那样直接调用，要想函数执行必须调用遍历器对象的next方法，也就是说想要执行函数就需要使用next方法，调用一次next方法执行一次yield表达式，直到执行完yield表达式。function* gener(){ yield "开始" yield "停止" yie

2020-09-06 21:44:12 169

原创 async,await(特点，项目中如何应用)

**async,await(特点，项目中如何应用)**async用于申明一个function是异步的，而await用于等待一个异步方法执行完成。await是个运算符，用于组成表达式，await表达式的运算结果取决于它等的东西。async/await是一个用同步思维解决异步问题的方案（等结果出来之后，代码才会继续往下执行）async function语法：自动将常规函数转换成Promise，返回值也是一个Promise对象只有async函数内部的异步操作执行完，才会执行then方法指定的回

2020-09-06 21:30:22 371

原创 promise(特点，项目中如何应用)

**promise**一、promise是什么简单来说promise就是构造函数，它就是为了解决异步编程的一种解决方案promise有三种状态:初始状态 pendind操作成功 fulfilled操作失败 rejectedPromise 对象的状态改变，只有两种可能：1、从pending变为fulfilled,就是将promise对象的状态从初始状态变为了成功状态，也就是异步操作成功时会调用，将异步操作的结果作为参数传递出去还有一种可能就是2.从pendin

2020-09-06 20:37:33 579

原创 var let const的区别

var let const的区别一、var声明的变量会挂载在window上，而let和const声明的变量不会var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c); // 1 undefined二、var声明变量存在变量提升，let和const不存在变量提升

2020-09-06 19:24:55 125

原创 vuex

**vuex**一、什么是vuex介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。二、我们什么时候应该用到Vuex呢？1.小应用不建议使用Vuex,因为小项目使用 Vuex 可能会比较繁琐冗余；2.中大型单页应用，因为要考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择；三、vuex里面都有些什么内容？state：存储状态。也就是变量；getters：派生状态

2020-09-03 22:37:41 414

原创 javascript中的继承详解

1 原型链继承父类的实例作为子类的原型function Woman(){ }Woman.prototype= new People();Woman.prototype.name = 'haixia';let womanObj = new Woman();优点：简单易于实现，父类的新增的实例与属性子类都能访问缺点：可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面无法实现多继承创建子类实例时，不能向父类构造函数中传参数2.借用构造函数继承（伪造对象、

2020-09-03 08:50:41 140

原创 js继承

js继承的6种方式想要继承，就必须要提供个父类（继承谁，提供继承的属性）一、原型链继承重点：让新实例的原型等于父类的实例。特点：实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）缺点：新实例无法向父类构造函数传参继承单一所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）二、借用构造函数继承重点：用.call()和.apply()将父类构造函数引

2020-09-02 20:58:28 114

原创原型与原型链

原型1、原型的作用就是实现属性和方法的共享2、在JavaScript中，原型也是一个对象，原型的作用，则是实现对象的继承JavaScript的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型JavaScript的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]原型链当一个对象调用自身不存在的属性和方法时就会去自己的proto的前辈p

2020-09-02 20:41:40 542

原创封装axios请求

封装axios请求第一步在vue项目里的src文件夹里面写 api 和 utils 文件夹第二步1、在api文件夹里面创建两个文件在api.js里面写入// import {getshouye_list,getshangping_list,getyiji_list,geterji_list,getxiangq_list,getzhuce_list,getyanzhengma_list,getyonghu_list,postdlxinxi_list,getdenglu_list} from '.

2020-09-02 18:20:26 168

原创 this以及apply,call,bind之间的区别

**this以及apply,call,bind之间的区别关于this对象每个函数都有自己的执行环境。全局执行环境是最外围的一个执行环境。this指向的就是当前代码所在的执行环境。它们之间的关系在浏览器里，在全局范围内this 指向window对象在函数中，this永远指向最后调用他的那个对象构造函数中，this指向new出来的那个新的对象call、apply、bind中的this被强绑定在指定的那个对象上箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调

2020-09-01 21:14:00 280

FengYang_的博客