02 2021 档案
摘要：Vue 3.0 项目初始化 第一步，安装 vue-cli： npm install -g @vue/cli 安装成功后，我们即可使用 vue 命令，测试方法： $ vue -V @vue/cli 4.3.1 第二步，初始化 vue 项目： vue create vue-next-test 输入命令后
阅读全文
摘要：首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是一款非常优秀的可视化前端框架。 官网地址：https://echarts.apache.org/zh/index.html 1.首先在官网 选择合适的下载版本
阅读全文
摘要：什么是JSP？ JSP代表JavaServer Pages；它主要用于开发动态网页，文件的扩展名为.jsp。JSP技术允许快速开发并易于维护所述信息丰富的动态网页。JSP网页基于HTML，XML或其他文档类型，它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。他们还需要
阅读全文
摘要：微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Ta
阅读全文
摘要：运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevToos Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个per
阅读全文
摘要：一、定义 foreEach()方法：针对每一个元素执行提供的函数。 map()方法：创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。 二、语法 foreEach arr.forEach(function callback(currentValue[, index[, ar
阅读全文
摘要：setTimeout是什么时候开始倒计时的？其实是在执行到当前位置的时候，就已经开始计时了，如：当定时时间设置为小于阻塞时间（200ms）： var startTime = window.performance.now(); console.log('setTimeoutstart',startTi
阅读全文
摘要：一、正常动画实践 为了使用户达到更好的体验，做动画的时候都知道用requestAnimationFrame了，但是他也是有极限的，当绘制的东西足够多或者复杂的时候，频繁的删除与重绘降低了很多性能。 在canvas中粒子系统应该算是比较常见的一种了，现在创建一个canvas画布，并绘制100个粒子在整
阅读全文
摘要：冒泡和捕获 在页面中点击一个元素，事件是从这个元素的祖先元素中逐层传递下来的，这个阶段为事件的捕获阶段。当事件传递到这个元素之后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡阶段。 如上图所示，事件传播分成三个阶段： 捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕
阅读全文
摘要：说明： 自主到从：从Main到Renderer的消息传递，借助BrowerWindow.webContents.send()发送消息。自从到主：从Renderer到Main的消息传递，借助ipcRender和ipcMain发送/接收消息。事件机制：无论是BrowerWindow.webContent
阅读全文
摘要：垃圾回收 JavaScript 中的内存管理是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。 当不再需要某样东西时会发生什么? JavaScript 引擎是如何发现并清理它? 可达性 JavaScript 中内存管理的主要概念是可达性。 简单地说，“可达性” 值就是
阅读全文
摘要：with的语法结构为： with(object) { /* 语句 */ } with主要是用来对对象取值的， 如下 所示： with(obj) { var newa = a; var newb = b; console.log(newa+newb); } 该语句 等价于： var newa = ob
阅读全文
摘要：HTTP请求头格式 一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成，下图给出了请求报文的一般格式。 提示: 回车符 \r 换行符 \n 请求首行分析： 请求方式: GET 和 POST 方式： GET请求：地址栏访问、超链接访问都是ge
阅读全文
摘要：Cookie是由服务器端生成，发送给User-Agent,浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器。 Cookie的诞生 由于HTTP协议是无状态的，而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了存储w
阅读全文
摘要：0、算法概述 0.1 算法分类 十种常见排序算法可以分为两大类： 比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。 非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时
阅读全文
摘要：什么是fc? FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC(Block Formatting Contexts)直译为"块级格式化上下文
阅读全文
摘要：什么是圣杯布局？ 圣杯布局是为了讨论「三栏液态布局」的实现，最早的完美实现是由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》 ，它主要讲述了网页中关于最佳圣杯的实现方法。 它有以下几点要求： 上部(header)和下部(foo
阅读全文
摘要：一、XMLHttpRequest的发展历程 XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。XMLHtt
阅读全文
摘要：1.class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。 const bar = new Bar(); // it's ok function Bar() { this.bar = 42; } const foo = new Foo(); //Ca
阅读全文
摘要：这是一篇关于js模块化历程的长长的流水账，记录js模块化思想的诞生与变迁，展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑，没经历过的人也应该知道这段历史。 无模块时代 在ajax还未提出之前，js还只是一种“玩具语言”，由Brendan Eich花了不到十天时间发明，用来在网页上进行表
阅读全文
摘要：这里先说两个概念：1、堆（heap）2、栈（stack）堆 是堆内存的简称。栈 是栈内存的简称。说到堆栈，我们讲的就是内存的使用和分配了，没有寄存器的事，也没有硬盘的事。各种语言在处理堆栈的原理上都大同小异。堆是动态分配内存，内存大小不一，也不会自动释放。栈是自动分配相对固定大小的内存空间，并由系统
阅读全文
摘要：我们经常面临一个抉择：到底使用JavaScript还是CSS动画，下面做一下对比 JS动画 缺点：(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。 (2)代码的复杂度
阅读全文
摘要：下面逐一为大家详解常用的ES6新特性： 1.不一样的变量声明：const和let ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部） let和var声明的区别： var x = '全局变量'; { let x = '局部变量'; console.log
阅读全文
摘要：主要区别就是，如果在 then 的第一个函数里抛出了异常，后面的 catch 能捕获到，而第二个函数捕获不到 p.then(function () { throw new Error() }, function () { // won't capture this error }) .catch(f
阅读全文
摘要：function hasPrototypeProperty(object, name) { return !object.hasOwnProperty(name) && (name in object) } 原理：hasOwnproperty()方法会返回一个布尔值，检测属性是否存在于对象中（实例）
阅读全文
摘要：引言 CSS3中的 Flexible Box，或者叫flexbox，是用于排列元素的一种布局模式。 顾名思义，弹性布局中的元素是有伸展和收缩自身的能力的。 相比于原来的布局方式，如float、position，根据盒子模型，就可以计算出元素的展示尺寸（长宽非百分比），除非溢出，否则不依赖于父容器的大
阅读全文
摘要：考虑两点: 第一个参数为undefined或null的时候，那么会转变为window 改变了this执行，让新的对象可以执行该函数。 call Function.prototype.myCall = function(context) { if (typeof context "undefined"
阅读全文
摘要：HTTP内容编码和HTTP压缩的区别 HTTP压缩，在HTTP协议中，其实是内容编码的一种。 在http协议中，可以对内容（也就是body部分）进行编码， 可以采用gzip这样的编码。 从而达到压缩的目的。 也可以使用其他的编码把内容搅乱或加密，以此来防止未授权的第三方看到文档的内容。 所以我们说H
阅读全文
摘要：Web动画形式 首先我们来了解一下Web有哪些动画形式 1. CSS3动画 Transform（变形） Transition（过渡） Animation（动画） 2. JS动画（操作DOM、修改CSS属性值） 3. Canvas动画 4. SVG动画 5. 以Three.js为首的3D动画 以上各种
阅读全文
摘要：canvas的图像变换api，可以帮助我们更加方便的绘画出一些酷炫的效果，也可以用来制作动画。接下来将总结一下canvas的变换方法，文末有一个例子来更加深刻的了解和利用这几个api。 1.画布旋转api 这里要先了解另一个api translate(x,y):重新定义画布上（0，0）的位置。 首先
阅读全文
摘要：canvas可以绘制出很多奇妙的样式和美丽的效果，通过几个简单的api就可以在画布上呈现出千变万化的效果，还可以制作网页游戏，接下来就总结一下和绘图有关的API。 绘画的时候canvas相当于画布，而context相当于画笔。 1.绘制线条 moveTo(x0,y0)：把当前画笔（ictx）移动到（
阅读全文
摘要：一、requestAnimationFrame概念 与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。这有什么好处呢？为什么requestAnimationFrame被称为神器呢？本文将详细介绍HTML5新增的定时器requestAni
阅读全文
摘要：1.mode webpack增加了一个mode配置，只有两种值development | production。对不同的环境他会启用不同的配置。 webpack4中通过内置的mode使用相应模式的内置优化。比如设置mode等于'development'，会将 process.env.NODE_ENV
阅读全文
摘要：1、分页功能实现效果如下： 2、代码如下 <!DOCTYPE html > <html> <head> <title> 消息呈现 </title> <link rel="icon" href="picture.ico" type="image/x-icon" /> <script src="../j
阅读全文
摘要：原理： 将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。 步骤一：建立html基本布局 如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <div
阅读全文
摘要：轮播在各个公司的官网上是非常常见的一种功能，能够有效的展示多个动态信息。之前一般实现轮播，是使用的js的动画。今天来介绍一种使用纯css实现的轮播图。 <div class="slide"> <ul class="slide-auto"> <li>one</li> <li>two</li> <li>
阅读全文
摘要：创建一个request.js用于封装axios，在 src/api/request，设置拦截器统一处理请求和相应。，然后在api文件夹中引入request.js后再使用封装后的方法进行请求。 封装 axios： request.js： import axios from 'axios' import
阅读全文
摘要：背景：因为axios中只能使用get和post方法来进行请求数据，没有提供jsonp等方法进行跨域访问数据 axios中文网址：https://www.kancloud.cn/yunye/axios/234845 // axios 中的GET请求 axios.get('/user', { param
阅读全文
摘要：一、是什么 Server-Side Rendering 我们称其为SSR，意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程 先来看看Web3个阶段的发展史： 传统服务端渲染SSR 单页面应用SPA 服务端渲染SSR
阅读全文
摘要：Vue 实例 首先，我觉得这个问题要先从 Vue 的实例开始讲起。Vue 的实例一般都是长成下面这个样子，不同的只是 id 名的不同。 <div id="app"></div> var vm = new Vue({ el: '#app', data: {}, methods: {} ... }) 这
阅读全文
摘要：碰到是否有template选项时，会询问是否要对template进行编译： 在template编译（渲染成UI）有一个过程。模板通过编译生成AST，再由AST生成Vue的渲染函数，渲染函数结合数据生成Virtual DOM树，对Virtual DOM进行diff和patch后生成新的UI。将上图细化
阅读全文
摘要：现在的流行框架，无论React还是Vue，都采用虚拟DOM。 好处就是，当我们数据变化时，无需像Backbone那样整体重新渲染，而是局部刷新变化部分，如下组件模版： <ul class="list"> <li>item1</li> <li>item2</li> </ul> 当页面中item2变为i
阅读全文
摘要：1. Mustache 概述 Mustache是基于JavaScript实现的模版引擎，类似于JQuery Template，但是这个模版更加的轻量级，语法更加的简单易用，很容易上手。 2. Mustache 具体的使用 下面就具体讲一下Mustache的使用。在开始讲之前，需要先从git hub上
阅读全文
摘要：单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScri
阅读全文
摘要：WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 <canvas>元素中使用。也就是说WebGL是在浏览
阅读全文
摘要：WebGL和OpenGL的区别为：性质不同、插件支持不同、用途不同。 WebGL WebGL的缩写为Web图形库。它主要用于渲染二维图形和交互式三维图形。它是可以与HTML5一起使用的Javascript API。它支持跨平台，并且仅以英语提供。WebGL程序由用JavaScript编写的控制代码组
阅读全文
摘要：1.前言 在官方 axios 中，还提供了 axios.all和axios.spread 这两个方法，这两个方法主要是为了执行多个并发请求，官方文档中，它们的用法示例如下： function getUserAccount() { return axios.get('/user/12345'); }
阅读全文
摘要：vue自2.0开始，vue-resource不再作为官方推荐的ajax方案，转而推荐使用axios。 按照作者的原话来说： “Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-reso
阅读全文
摘要：1、el 提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。 因为所有的挂载元素会被Vue生成的DOM替换。因此不推荐挂载Vue实例到html或者body上。 如果在const vm = new Vue({})中存在这个选项，实例
阅读全文
摘要：一、将方法挂载到Vue.prototype上面 缺点：调用该方法得时候没有提示 //grobal.js const RandomString =(encode = 36 ,number = -8) =>{ return Math.random() //生成随机数，eg：0.1234 .toStrin
阅读全文
摘要：怎么同时渲染整个列表，比如使用 v-for？在这种场景中，使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点： 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素
阅读全文
摘要：让多个组件使用同一个挂载点，并动态切换，这就是动态组件。本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件 <div id="example"> <button @click="change">切换页面</button>
阅读全文
摘要：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM，可以配合使用第三方 JavaScrip
阅读全文
摘要：一、slot是什么 在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符 该占位符可以在后期使用自己的标记语言填充，这样就可以创建单独的DOM树，并将它与其它的组件组合在一起。 在Vue中的概念也是如此 Slot 艺名插槽，花名“占坑”，我
阅读全文
摘要：转自：https://www.cnblogs.com/jiaoshou/p/13415259.html 我们在写vue项目的时候都会给组件命名，这里的name非必选项。 export default { name:'xxx' } **官方文档指出：name只有作为组件选项时起作用。 ** 常见的几种
阅读全文
摘要：本文介绍Vue自定义指令基础，采用注册一个v-color的指令，给字体赋值颜色为例子。 一、全局注册 Vue.directive('color', { inserted: function (el,binding) { el.style.color=binding.value; } }) 使用 <t
阅读全文
摘要：先来看一个需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？ 有3种方法可以实现 ①：直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭） ②：在div和span外面包裹一个div，给这个div加循环（该方法会额外增加一个多余的
阅读全文
摘要：如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。 不配置是这样子的： 使用Vue-cli@3工具 favicon图标的配置也很简单，vue-cli默认帮我们安装了html-w
阅读全文
摘要：随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据
阅读全文
摘要：引子 JavaScript本身是一个弱类型语言，项目中容易发生错误，做好网页错误监控，能帮助开发者迅速定位问题，保证线上稳定。 介绍 errorHandler、errorCaptured 文档传送门: errorHandler、errorCaptured errorHandler 指定组件的渲染和观
阅读全文
摘要：内联模板 组件的模板一般都是在template选项内定义的，Vue提供了一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它当内容分发，这让模板更灵活。 <!DOCTYPE html> <html lang="en"> <head
阅读全文
摘要：信息的分类展示列表 这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示： 看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。 对，你说的没错，事实就是这样简单。那么就先来看看这么简单的列表怎么实现的，然后这个方案的劣势在哪里。 首先看看我们的数据格式 list:
阅读全文
摘要：实现效果： HTML代码： <body> <button onclick="showDialog()">点击展示dialog</button> <dialog class="dialog"> <div class="dialog-header"> 这是标题 <div class="close-btn
阅读全文
摘要：前言： filters作为Vue中的过滤器 我们在实际开发中会经常使用到 比如在模板上格式化我们想要的日期 但是使用这个属性也会遇到一些问题 比如我们最常用的时间格式化工具moment.js 当我们把它挂载到全局的时候 会使用： this.$moment().format('MM月DD日') 这时候
阅读全文
摘要：解决方法： Object.assign(this.$data, this.$options.data()) this.$data：当前状态下的data，this.$options.data()：该组件初始状态下的data。 Object.assign() Object.assign（）方法用于将所有
阅读全文
摘要：在组件中将comments选项设置为true <template comments> ... </template> comments 类型：boolean 默认值：false 限制：这个选项只在完整构建版本中的浏览器内编译时可用。 详细： 当设为 true 时，将会保留且渲染模板中的 HTML 注
阅读全文
摘要：JSX 是什么 JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性 为什么要在 Vue 中使用 J
阅读全文
摘要：都不是必须的，如果是普通组件那么只能是一个静态html，如果是函数式组件， 那么可以直接使用props等函数式组件属性。 函数式组件 <anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading> 这个锚点标题组
阅读全文
摘要：可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。 html： <div id=
阅读全文
摘要：v-on后面接一个对象，但是不支持事件修饰符。 <template> <div v-on:{click:a,dblclick:b}></div> </template> <script> methods:{ a(){ alert(1) }, b(){ alert(2) } } </script>
阅读全文
摘要：.lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步： <!-- 在“change”时而非“input”时更新 --> <input v-mode
阅读全文
摘要：@click="handleOpen" 默认第一个参数传入event对象; @click="handleOpen(0, $event)",如果自己需要传入参数和event对象，则需要使用$event来获取event对象并传入handleOpen。
阅读全文
摘要：动态组件 <component :is="componentName"></component>， componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。 is的用法 有些HTML元素，诸
阅读全文
摘要：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <!-- 在双花括号中 --> {{ message | c
阅读全文
摘要：vue实现数据双向绑定有这么一个过程：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty() 把这些属性全部转为getter/setter。每个组件实例都有相应的 watcher 实例对象
阅读全文
摘要：需求 因为某些原因，某个页面的加载需要很长时间。为了不让用户重新加载，再次等待很长时间，决定当从这个页面跳转其他页面时，打开一个新窗口。 编程时导航 使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.ope
阅读全文
摘要：scrollBehavior (to, from, savedPosition) { if (savedPosition) { //保持原先的滚动位置 return savedPosition } else { //滚动到顶部 return { x: 0, y: 0 } } } 使用前端路由，当切换
阅读全文
摘要：什么是单页面应用(SPA)? 首先我们需要了解一下前置的基础知识——SPA(单页面应用)。互联网是一步一步发展到今天的，用一个普通用户能够觉察到的衡量因素——上网速度，来观察互联网的发展。由一开始的拨号上网，到宽带上网，再到如今的百兆光纤等等。信息的高速公路逐渐发展应用于全球的各个方面。而对于web
阅读全文
摘要：路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个
阅读全文
摘要：说明： debounce和throttle在脚手架的使用，此处以防抖函数debounce为例避免按钮被重复点击 引入： import lodash from 'lodash' 使用： 直接使用debounce方法 // 审核 audit: lodash.debounce(function() { t
阅读全文
摘要：当我们使用原生的audio标签时，可以看到如下的效果。 那么如何让下载按钮隐藏掉呢？ 1. controlsList="nodownload" // 这个方法只支持 Chrome 58+， 低于该版本的是没有无法隐藏的 <audio src="/i/horse.ogg" controls="cont
阅读全文
摘要：store的结构： city模块： 在各模块使用了命名空间的情况下，即 namespaced: true 时： 组件中访问模块里的state 传统方法： this.$store.state['模块名']['属性名'] 例如：this.$store.state.city.list。 控制台输出 thi
阅读全文
摘要：当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会导致出错。 <input v-model="obj.message"> 假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输入时，v-model 会试图直接修改 obj.
阅读全文
摘要：一、state 1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.St
阅读全文
摘要：有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数： computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } 如果有
阅读全文
摘要：mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符 (opens new window)，我们可以极大地简化写法： computed: { l
阅读全文
摘要：如图所示，上面这个列表我们使用下标 (index) 作为 key 值，其对应关系如图。此时页面显示是没有问题的, 控制台也不会报错. 但是——假设此时我们删除 List 中的第 2 项内容 (虚拟 DOM 很简单). 我们来看看会有什么效果? 当我们删除了原来 list 中的下标为 1 的数据 (虚
阅读全文
摘要：Vue 的双向数据绑定，使得修改数据后，视图就会跟着发生更新，比如对数组进行增加元素、切割等操作。然而直接通过下标修改数组内容后，视图却不发生变化。那么，在保留原有的数组响应方式下，为什么 Vue 不增加对数组下标的响应式监听呢？ arr[index] = val 不是响应式的 在 Vue 官网的
阅读全文
摘要：在表格等容器中加载数据时显示。 Element 提供了两种调用 Loading 的方法：指令和服务。 一、指令方式： 1.对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的
阅读全文
摘要：一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ，还新增了更细粒度的'min-content'和'max-content'。这几个值都可用在 width, height, min-width,
阅读全文
摘要：1. 分析代码 #include <stdio.h> void fun(int n) { printf("1th - Level: %d Address: %d\n", n, &n); if(n < 3) fun(n+1); printf("2th - Level: %d Address: %d\n
阅读全文
摘要：一、浅拷贝 浅拷贝只会将被复制对象的第一层属性进行复制，若第一层属性为原始类型的值，则直接复制其值，一般称之为“传值”；若第一层属性为引用类型的值，则复制的是其存储的指向堆内存对象的地址指针，一般称之为“传址”。因此浅拷贝的结果存在当改变一个对象的值时引起另一个对象值变化的问题。即新对象和旧对象之间
阅读全文
