10 2020 档案
摘要：前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，
阅读全文
摘要：从字面理解，freeze是冷冻，冻结的意思（像账户冻结）。 当用const申明常量时，基础数据类型申明后是不可以被修改的，但是申明数组和对象时，申明的变量只是指向了该引用数据类型的地址，所以只是地址不允许被修改，但是内容可以被修改，这个时候就可以用到Object.freeze()函数了 给用Obje
阅读全文
摘要：//并发请求：同时进行多个请求，同时处理返回值 axios.all( [ axios.get('/data.json'), axios.get('/city.json') ] ).then( axios.spread((dataRes,cityRes) =>{ console.log(dataRes
阅读全文
摘要：首先，for-in是ES5标准，遍历的是key（可遍历对象、数组或字符串的key）；for-of是ES6标准，遍历的是value（可遍历对象、数组或字符串的value）。 for...in 循环 for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 for ...
阅读全文
摘要：首先是查资料，MDN的解释是： 这个方法可以用来检测一个对象是否含有特定的自身属性语法：obj.hasOwnProperty(prop)参数：要检测的属性 字符串 名称或者 Symbol返回值： 用来判断某个对象是否含有指定的属性的 Boolean 直接上代码来个示例： function ObjWi
阅读全文
摘要：简介：对于不了解slot的用法（参考：大白话vue-slot的用法）又刚接触render函数的同学来说，官网的解释无疑一脸懵逼，这里就整理下个人对render函数的理解 问题： 1、render函数是什么 2、render函数怎么用 render函数是什么 简单的说，在vue中我们使用模板HTML语
阅读全文
摘要：实现一个三列布局的左右宽度固定，中间自适应。可以使用传统的css布局，也可以使用css3的新特性flex布局实现。 1.使用自身浮动法： 自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用m
阅读全文
摘要：什么叫优雅降级和渐进增强？ 渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版
阅读全文
摘要：构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上 function Cat(name,color){ Animal.apply(this, arguments); this.name = name; this.color = color; } 实例继承：将子对象的
阅读全文
摘要：IOS、Android与H5通信-JsBridge原理(总结) H5和原生app（ios，android）交互的载体基本都是基于Webview，可以把Webview看作是一个性能打八折的移动浏览器。 ios调用Javascript 简单说下这几种：WKWebView 、UIWebView、JavaS
阅读全文
摘要：今天面试被问到这个问题，我自己思考的是让父组件做两个子组件之间的桥梁，但是我并没有去说，感觉是有些low啊，面试完了赶紧查查是怎么通信的； 就是我自己设想的这种方法也是解决问题的一种方法； 兄弟组件通讯 在Vue中实现兄弟组件的通讯也有几种方法，其中一种方法是让父组件允当两个子组件之间的中间件（中继
阅读全文
摘要：static和assets的区别，原理就在于webpack是如何处理静态资源的 assets 1）在vue组件中，所有模板和css都会被vue-html-loader和css-loader解析，并查找资源url。 例：<img src="./logo.png" /> 或者 background: u
阅读全文
摘要：箭头函数： let fun = () => { console.log('lalalala'); } 普通函数： function fun() { console.log('lalla'); } 箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ ... }和
阅读全文
摘要：一：px和border的问题 border: 1px ··· 问题描述 例如我们在电脑端开发移动端项目时，会给某个元素设置border-bottom: 1px ···样式。这时在谷歌设备模拟器中border正如我们所设置的一样，但是当项目在手机上展示时，会发现原本的border-bottom: 1p
阅读全文
摘要：之前在项目中其实，一直用的是vue-cli，并没有关注过webpack的打包工具，vue脚手架其实已经内置webpack了，为什么市场上还这么多要求会webpack呢，那么肯定是有优点可取的； 下面系统学习下webpack，一边学习一边记录； 1. 创建配置文件 webpack.config.js
阅读全文
摘要：wx.setStorageSync与wx.setStorage的区别 关于同步缓存和异步缓存的区别： 同步缓存就是必须要同步方法处理完，程序才能继续向下执行。 异步方法无论方法执行成功与否，都会继续向下执 wx.setStorage(Object object)是微信小程序异步缓存方法： 是一个获取
阅读全文
摘要：官方组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/微信小程序内置了很多组件，开发中可以直接使用他们来展示响应的内容 1.视图容器 view 类似于web中的div，不过他有一些内置的属性 hover-class：指定按
阅读全文
摘要：在我们进行页面网络请求时，我们一般会这样写： onLoad:function(options){ wx.request({ url: 'https://api.douban.com/v2/movie/in_theaters ', header: { 'content-type': 'applicat
阅读全文
摘要：创建你的第一个小程序 创建你的第一个小程序还是比较简单，在「微信开发工具」新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，点击 " 新建 "，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。
阅读全文
摘要：今天开始记录总结小程序一些知识点： 添加属性 mode=”widthFix” <image class="img" src="../../images/hello.png" mode="widthFix">
阅读全文
摘要：Object.keys方法 Object.keys方法是JavaScript中用于遍历对象属性的一个方法 。它传入的参数是一个对象，返回的是一个数组，数组中包含的是该对象所有的属性名。如： var cat= { name:’mini’, age:2, color:’yellow’, desc:”cu
阅读全文
摘要：EventBus的简介 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的V
阅读全文
摘要：data-*自定义数据属性 首先讲一下语法格式： data-* =“值” data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符 属性值可以是任意字符串 其实data-*加在标签里并没有任何含义，只不过，起到一个存放值的一个方式。 在jQue
阅读全文
摘要：在网页开发中，表单是经常用到的，而今天要介绍的这个标签也是经常出现在表单中的，即<label>标签，我们一起来看看它有什么用途吧！ “label”作为英文单词有“标记”的意思，那它作为html中的标签又有什么意思呢？下面我们就一起来看看吧！ 一、<label>标签定义及用法 在html中，<labe
阅读全文
摘要：前端性能优化之文档片段节点 我们知道，操作DOM是非常耗时的，并且直接在DOM上操作会使得页面不断的重排和重绘。 所以我们可以使用“文档片段节点”，即DocumentFragment。 使用方法： 将将我们希望添加的元素先添加到DocumentFragment上，然后在将它添加到DOM上。 方法：
阅读全文
摘要：1. 前言 作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家
阅读全文
摘要：//函数声明可以使函数的调用在函数之前提前调用 function a() { console.log("a"); } //函数表达式必须在编译器读取完函数表达式后才能调用函数 var b=function () { console.log("b") } //函数声明的自执行必用()将函数声明括起来后
阅读全文
摘要：this是面向对象语言中的一个重要概念，在JAVA,C#等大型语言中，this固定指向运行时的当前对象。但是在javascript中，由于 javascript的动态性（解释执行，当然也有简单的预编译过程），this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的 自由和灵活，结
阅读全文
摘要：节点属性 parentNode: 父节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibling: 下一个兄弟节点 previousSibling: 上一个兄弟节点 nodeType: 节点类型(1 元素节点 2 属性节点 3 文本节点) nodeName
阅读全文
摘要：先看个小例子 function fn(){ console.log(a);//undefined; var a = 1; } fn(); 为什么打印出来的是 undefined 呢？ 执行上下文概念 当代码运行时，会产生一个对应的执行环境，在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋
阅读全文
摘要：网络协议规定了计算机之间连接的物理，机械（网线与网卡的规定连接），电气（有效的电平范围）以及计算机之间的相互寻址规则，数据发生冲突的解决，长的数据如何分段传送与接收等。下面简单地介绍几个常用的网络协议。 1.TCP/IP协议组 TCP/IP协议(传输控制协议)由网络层的IP协议和传输层的TCP协议组
阅读全文
摘要：vue中的watch监听，除了监听data中的数据 还可以监听props、$route、$emit、computed watch:{ //监听路由变化 $route( to , from ){ console.log( to , from ) // to , from 分别表示从哪跳转到哪，都是一个
阅读全文
摘要：beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不能获取组件实例 `this` // 因为当钩子执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当
阅读全文
摘要：git status： 查看当前分支的操作状态。如果只修改没有添加，使用此命令可能看到红色的提示信息，如果使用了add命令，可能会看到绿色的提示信息，具体颜色可能与系统或终端的不同而不同。 git diff： 查看当前修改和暂存区的不同 git reset <HEAD^ or hashID>: 撤销
阅读全文
摘要：this.$router.push跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面 // 字符串 this.$router.push('index') // 对象 this.$router.push({path: 'login-pw'}) // 带参数 this.
阅读全文
摘要：1.导航被触发2.在即将离开的组件里调用beforeRouteLeave守卫3.调用全局前置守卫beforeEach守卫4.在重用的组件里调用beforeRouteUpdate守卫 / 调用路由配置的beforeEnter守卫5.解析异步路由组件6.在被激活的组件里调用beforeRouteEnte
阅读全文
摘要：active-class是哪个组件的属性 active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换 在vue组件中怎么获取到当前的路由信息 如果是template中获取直接 $route 即可如果是script中获取 this.$route可以 c
阅读全文
摘要：vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法：https://www.cnblogs.com/kugeliu/p/7172042.html vue-router有提供一个方法scrollBehavior，它可以使切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位
阅读全文
摘要：问题：为什么要响应参数变化？ 切换路由，路由参数发生了变化，但是页面数据并未及时更新，需要强制刷新后才会变化。 路由后面参数不同渲染相同的组件时（组件复用比销毁重新创建效率要高），在切换路由后，当前组件下的生命周期函数不会再被调用。 解决方案： 使用 watch 监听 watch: { $route
阅读全文
摘要：方法一：/deep/穿甲弹 /deep/.el-upload--picture-card { height: 90px; width: 90px; line-height: 100px; } 方法二： 用>>>穿透 .el-table >>> .el-table__header 用>>>穿透方法三：
阅读全文
摘要：场景描述：element-ui的table表格数据有提供多选框的功能,只要在表格列中多加一列就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。解决办法：element-ui提供了reserve-selection，它仅对 type
阅读全文
摘要：方法1： git reset –hard HEAD ^ ( ^ 表示回到上一个版本，如果需要回退到上上个版本的话，将HEAD^改成HEAD^^, 以此类推。那如果要回退到前100个版本，这种方法肯定不方便，我们可以使用简便命令操作：git reset –hard HEAD~100 ); 我们可以看到
阅读全文
摘要：今天面试被问到一个问题，其实是很基础的问题，但是自己没有答出来，而且答的不好，自己整理以下，发出来，以时刻警醒自己 一：Number() 如果是Boolean值，true和false值将分别被转换为1和0。 如果是数字值，只是简单的传入和返回。 如果是null值，返回0。 如果是undefined，
阅读全文
摘要：如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。 1. 如果是基本数据类型，名字和值都会储存在栈内存中 var a = 1; b = a; // 栈内存会开辟一个新的内存空间，此时
阅读全文
摘要：节流和防抖严格意义来说是性能优化的知识，但是遇到频率还是很高的，放任不管或者处理不当很容易引起浏览器的卡死。 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和thro
阅读全文
摘要：keep-alive <keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。说白了被<keep-alive>包裹的组件其会被缓存废话不多说直接上例子. 我们现在创建两个子组件conpoment1,c
阅读全文
摘要：昨天有人问我类怎么写，我一下就蒙了，啥是类啊，查了资料才知道，就是js里的构建函数 1、构造函数法 构造函数的优点是：我们可以根据参数来构造不同的对象实例 ，缺点是每次构造实例对象时都会生成getName方法，造成了内存的浪费。 用一个外部函数来代替类方法，达到了每个对象共享同一个方法 2、原型方式
阅读全文
摘要：一、什么是webpack? webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具； webpack安装的两种方式 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令 在项目根目录中运行npm i webpack -
阅读全文
摘要：1.beforeCreat 第一个生命周期函数，表示实例在完全创建出来之前会执行它，在执行它时，data和methods中的数据都还未初始化。 2.created 第二个生命周期函数，此时data和methods已经初始化完成，created()完成之后，vue开始编译模板，最终在内存中生成一个编译
阅读全文
摘要：<script type="text/javascript"> function sum() { var n = 0; for(var i = 0; i < arguments.length; i++) { n += arguments[i]; } return n; } alert(sum(1,2
阅读全文
摘要：一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，position（absolut
阅读全文
摘要：今天对这个问题做一个总结 一、Vue的初始化 我们在使用Vue.js的时候，最基本的一个使用，就是在HTML引入Vue.js的库文件，并写如下一段代码： 1.var app = new Vue({ 2. el: '#app', 3. data: { 4. message: 'Hello Vue!'
阅读全文
摘要：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程： 我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我
阅读全文
摘要：之前只了解到jsonp是动态加载js，利用src的实现跨域 今天查资料总结以下 一、实现原理 jsonp的原理本质就是利用script标签的src的天然可跨域特性实现跨域,让服务器接收浏览器传过来的函数名,返回一个带参的函数调用,浏览器接收数据,完成函数调用 JSONP是JSON with Padd
阅读全文
摘要：今天面试，面试官问到这个问题，回来查资料总结下 无论是在小程序还是APP中，打开一个页面其实就是创建了一个新的View对象，一层层叠加的。当点击页面的回退按钮就是把当前页面关闭。 这个过程中会涉及到一个问题，就是打开页面的数量。在某些设计下，比如一个商品详情页面中会推荐其他的商品，这些商品点进去就是
阅读全文
摘要：一、不确定宽高的盒子垂直水平居中 1、 .father { display: table-cell; text-align: center; vertical-align: middle; width:500px; height: 500px; } .child { display: inline-
阅读全文
摘要：背景： 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.definePropert
阅读全文
摘要：一些常见HTTP状态码为： 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用 常见HTTP状态码大全 1xx（临时响应） 表示临时响应并需要请求者继续执行操作的状态代码。 代码 说明 http状态码 100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示
阅读全文
摘要：一、构成HTTP请求的简单流程图（图摘录的），如下： Web Client可以是浏览器、搜索引擎、机器人等等一切基于HTTP协议发起http请求的工具。Web Server可以是任何的能解析HTTP请求，并返回给Web Client可识别的响应的服务，常见的有apache、nginx、IIS等等we
阅读全文
摘要：将多维数组转换为一维数组 解决方案有很多，以下来一一例举 方法一：使用数组的join() let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]] console.log(arr.join()) // 输出为：1,
阅读全文
摘要：一、合并对象 解决办法：Object.assign 方法 Object.assign(form, obj) >Object.assign(目标对象, 被合并的对象) <script> let form = {name: 'liming', sex: '男'}; let obj = {class: '
阅读全文
摘要：Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充
阅读全文
摘要：有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值。是怎么实现的呢？ 实际上v-model 只是语法糖而已 <input v-model="inputValue" /> <input v-bind:value="inputValue" v-on:input="inp
阅读全文
摘要：vue的双向数据绑定v-model vue的双向数据绑定原理是什么？ 一般都会搜索到，是用Object.defineProperty( )，来监听数据get和set，来实现数据劫持的 假如对Object.defineProperty( )不是很了解，可以点击上面链接，看看其语法！ 举个简单的例子：
阅读全文
摘要：之前在用这个属性的时候，就是觉得他基本用在表单或者子组件上，方便方法的调用，查资料之后，才明白更多。 基本用法，本页面获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获
阅读全文
摘要：之前在项目中也用过这个方法，但是也是一知半解的，并不是很明白，今天查查资料，补充说明下 定义： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行
阅读全文
摘要：学习过程中只会使用，不太了解这些个的区别，学习了解下： 首先说说两者的概念： Promise Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法
阅读全文
摘要：模块一：全局导航钩子函数 1、vue router.beforeEach（全局前置守卫） beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。 它的三个参数： to: (Route路由对象) 即将要进入的目
阅读全文
摘要：为什么要有hash 和history？ 对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。 前端路由的核心，就在于——改变试图的同时不会向后端发出请求。 1：hash - 即地址栏URL中的 # 符号（此hash不是密码学里
阅读全文
摘要：在路由跳转的时候除了用router-link标签以外需要在script标签在事件里面跳转，所以有个方法就是在script标签里面写this.$router.push('要跳转的路径名') $route为当前router跳转对象里面可以获取name、path、query、params、fullPath
阅读全文
摘要：其实用了这么久的vue，里面有很多东西都没有去细细整理分析，今天就整理一下 Import(模块、文件)引入方式 1.引入js文件 在用的那一页，引入文件 Import tools from ‘./tools.js’ 相应的js文件，必须暴露出来 2.引入组件 Import Hello from ‘.
阅读全文
摘要：一、rest参数 前引：在函数体内，它可以通过一个对象来获取所有参数，这个对象是：arguments function sayHi() { alert("hello " + arguments[0] + "," + arguments[1]); } 到了ES6，又引入了rest参数，形式为：...变
阅读全文
摘要：set的一些遍历操作： keys()：返回键名的遍历器 values()：返回键值的遍历器 entries()：返回键值对的遍历器 forEach()：使用回调函数遍历每个成员 let set = new Set(['red', 'green', 'blue']); for (let item of
阅读全文
摘要：一、简介 Set类似于数组，但是它里面每一项的值是唯一的，没有重复的值，Set是一个构造函数，用来生成set的数据结构。 const arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1]; const set = new Set(); arr.forEach(item => se
阅读全文
摘要：1、遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。 2、Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次
阅读全文
摘要：1.简介 Generator函数是es6提供的一种异步编程的解决方案,语法行为与传统函数完全不一样。 Generator函数有多种理解角度,从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。 执行Generator函数会返回一个遍历器对象，也就是说，Generat
阅读全文
摘要：一、异步编程背景 由于js的运行机制，JS引擎建立在单线程事件循环的概念上，js引擎同一时间只能执行一段代码，每当一段代码准备被执行，他就会被添加到作业队列。当JS引擎结束当前代码的执行后，事件循环就会执行队列的下一个作业。作业会从队列的第一个开始，一次运行到最后一个。 之前普遍使用的异步方式是回调
阅读全文
摘要：要求：5秒后，打印出传递的字符串 function dayin(pram){ let pro = new promise(function(resolve,reject){ setTimeout(function(){ resolve(pram); },5000) }) return pro } d
阅读全文
