03 2019 档案
摘要：安装 flexible和 postcss-px2rem（命令行安装） lexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。 在Galaxy S III手机上 在
阅读全文
摘要：图中&属于postcss的语法，这样书写样式可以清楚的看出选择器之前的层级关系，非常好用。 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的，这样写不会报错，但是样式不生效。 为了让项目中的vue文件支持这种写法，需要在配置postcss-cssnext模块。 往项目中安装post
阅读全文
摘要：什么是预加载和为什么要用预加载 资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。 预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。提升用户体验 为什么要用预加载：在网页全部加载之前，对一些主要内容进行加载，
阅读全文
摘要：v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇 但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子 v-model 并不关心表单控件初始化所生成的值。因为
阅读全文
摘要：概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaSc
阅读全文
摘要：理解过滤器 功能: 对要显示的数据进行特定格式化后再显示，注意: 并没有改变原本的数据, 可是产生新的对应的数据 局部定义过滤器 全局定义过滤器 在项目开发中，如果定义的过滤器在很多组件中需要使用到，那么最好定义在全局上，下面是定义过滤器的语法 全局的过滤器在main.js中创建，最好就是写一个单独
阅读全文
摘要：async 函数概述 async/await应该是目前最简单的异步方案，ES7 中新增了 async/await 两个关键词。 async 可以声明一个异步函数，此函数需要返回一个 Promise 对象。await 可以等待一个 Promise 对象 resolve，并拿到结果。 其实async函数
阅读全文
摘要：Promise对象概述（什么是Promise） Promise 是异步编程的一种解决方案，比传统的异步解决方案——回调函数和事件——更合理和更强大 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获
阅读全文
摘要：Generator函数的概述 Generator 函数是 ES6 提供的一种异步编程解决方案 Generator函数指的是一种新的语法结构,是一个遍历器对象生成器,它内部可以封装多个状态，很适合用于异步操作 Generator函数语法和普通的function函数类似，但是有三个不同点: （1）fun
阅读全文
摘要：Symbol数据类型简介 ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。 Symbol 值通过S
阅读全文
摘要：iterator（遍历器）的概念 JavaScript原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机
阅读全文
摘要：传统创建对象模板的方式 JavaScript 语言中，生成实例对象的传统方法是通过构造函数 ES6创建对象模板的方式Class ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类 基本上，ES6 的class可以看作只是一个语法糖，
阅读全文
摘要：首先来看一下前端性能优化所涉及的层面有如下四个：网络层面，构建层面，浏览器渲染层面，服务端层面 具体的优化点有：资源合并与压缩，图片编码原理和类型的选择，浏览器的渲染机制，懒加载与预加载，浏览器存储，缓存机制，PWA，Vue-SSR等等 首先来了解一下web前端的本质 web前端的本质是一种GUI软
阅读全文
摘要：前述 对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟
阅读全文
摘要：什么是HTTP压缩 HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法。 HTTP采用通用的压缩算法，比如gzip来压缩HTML,Javascript, CSS文件。 能大大减少网络传输的数据量，提高了用户显示网页的速度。当然，同时会增加一点点服务器的开销。 本文从HTTP协议
阅读全文
摘要：图片PNG8/PNG24/PNG32之间的区别 PNG8——256色 + 支持透明 PNG24——2^24色 + 不支持透明 PNG32——2^24色 + 支持透明 不同格式的图片常用的业务场景 jpg有损压缩，压缩率高，不支持透明，大部分不需要透明图片的业务场景 png支持透明，浏览器兼容好，大部
阅读全文
摘要：集合的概念 集合是一组无序且唯一（元素不能重复）的项组成的。这个数据结构使用了与有限集合相同的数学概念，应用在计算机的数据结构中 特点：key和value相同，没有重复的value Set集合 ES6提供了数据结构set，它类似于数组，但是成员的值都是唯一的，没有重复的值 。Set 本身是一个构造函
阅读全文
摘要：解构赋值的概念 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring） 传统对变量赋值的方式，以前，为变量赋值，只能直接指定值。 数组的解构赋值——简单的数组解构赋值和嵌套数组的解构赋值 ES6允许写成下面这样。可以从数组中提取值，按照对应位置，对变
阅读全文
摘要：call()/apply()/bind()的用法 Function.prototype.bind(obj) :将函数内的this绑定为obj, 并将函数返回 区别bind()与call()和apply(): 都能指定函数中的this，call()/apply()是立即调用函数，bind()是将函数返
阅读全文
摘要：二进制与八进制数值表示法: 二进制用0b, 八进制用0o Number.isFinite(i) 判断是否是有限大的数 Number.isNaN(i) 判断是否是NaN Number.isInteger(i) 判断是否是整数 Number.parseInt(str) 将字符串转换为对应的数值 Math
阅读全文
摘要：这篇文章主要来讲HTML5中的新方法：parse()把字符串转换成josn格式的数据和stringify()把josn格式的数据转换成字符串 eval()方法的回顾 eval()方法可以将任何字符串解析成js，下面来解析一个函数，并且解析完后执行这个函数 但是这个方法有个缺点，就是如果这个字符串里面
阅读全文
摘要：运行模式 正常(混杂)模式与严格模式,除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode） 顾名思义，这种模式使得Javascript在更严格的语法条件下运行 严格模式的目的/作用 1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行
阅读全文
摘要：变异方法（具有更新检测的数组方法） vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。 这些方法如下：push() 、pop() 、shift() 、unshift() 、splice() 、sort() 、reverse()，只要这些方法操作更新了数据，视图就会跟着更新 这些方法操作
阅读全文
摘要：列表渲染数组 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items是源数据数组并且 item 是数组元素迭代的别名。 你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法 列
阅读全文
摘要：v-if和v-else和v-else-if v-if：使用 v-if 指令实现元素是否显示 v-else：你可以使用 v-else 指令来表示 v-if 的“else 块”。v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别 v-else-if：2.1
阅读全文
摘要：开发避免不了的就是调试工具，因为vue是进行数据驱动的，单从chrome里面进行element查看，查不到什么鸟东西，必须要进行对数据动向进行关查 首先是下载这个工具，github下载地址：https://github.com/vuejs/vue-devtools，或者直接使用git克隆下来 git
阅读全文
摘要：在vue中，指令以v-开头,是一种特殊的自定义行间属性，指令的职责就是其表达式的值改变时相应地将某些行为应用到DOM上 指令使用的示例 在下面的运行结果中可以看到，v-html是可以解析html标签的并且还会将原有的内容或者结构覆盖掉，v-text会将原来p标签内的内容覆盖掉 vue的内置指令 v-
阅读全文
