12 2017 档案
摘要：1、Vue实例常用属性 （1）数据 data:Vue 实例的数据对象 components：Vue实例配置局部注册组件 （2）类方法computed:计算属性 watch：侦听属性 filters：过滤器 methods:Vue实例方法 render：渲染函数，创建虚拟DOM （3）生命周期crea
阅读全文
摘要：1、代码地址 github：https://github.com/MengFangui/VueComponentDemo- 2、关键代码 （1）main.js (2)app.vue (3)button.vue 使用import导入css方法： (4)title.vue 3、效果
阅读全文
摘要：1、概述 SSR：网站内容由服务端渲染，然后返回客户端（查看网页源代码，所有内容都在源代码里面）。 2、SSR优势 （1）SSR利于SEO。 （2）SSR减少请求量和客户端渲染时间。
阅读全文
摘要：1、示例代码 采用vue单文件组件，使用moment插件格式化日期 2、效果 3、说明 过滤器内是没有this引用的，过滤器内的this是undefined，所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。
阅读全文
摘要：1、使用控制台查看Referer属性 （1）本站请求本站资源 （2）非本站请求本站资源 2、referer referer标签告诉请求响应者（服务器），本次请求的引用页是谁，服务器可以分析这个引用者是否“友好”，是否允许其“引用”，对于不允许访问的引用者，可以不提供图片，这样访问者在页面上就只能看到
阅读全文
摘要：1、github github地址：https://github.com/MengFangui/VueProjectTemplate 2、webpack配置 （1）基础配置webpack.base.config.js const path = require('path'); //处理共用、通用的j
阅读全文
摘要：1、示例代码 （注：写到vue单文件中了） 2、说明 （1）需要transition 标签包裹。 （2）6个class状态 （3）效果：
阅读全文
摘要：1、概述 Vuex作为插件，管理和维护整个项目的组件状态。 2、安装vuex cnpm i --save vuex 3、vuex使用 github地址：https://github.com/MengFangui/Vuex 4、配置项 （1）数据：数据保存在state中。store的数据只能读取，不能
阅读全文
摘要：1、前端路由 后端路由：多页面，服务器端渲染好返回给浏览器。 前端路由：改变url不向服务器发送请求；前端可以监听url变化；前端可以解析url并执行相应操作。 前后端分离：后端只提供API来返回数据，前端通过ajax获取数据后，在通过一定的方式渲染到页面上。 SPA：前后端分离+前端路由。 SPA
阅读全文
摘要：一、代码地址 github：https://github.com/MengFangui/VueWebpackConfig 二、配置说明 1、命令 （1）npm i 安装依赖包 （2）num run dev 发布调试环境 （3）npm run bulid 发布线上环境 2、功能 （1）处理vue文件
阅读全文
摘要：1、map方法 控制台输出为： 2、filter方法 控制台输出为： 3、forEach方法 控制台输出： 总结：以上函数的回调函数的形参是一样的。 注意：jQuery中的each的参数是：
阅读全文
摘要：1、传统template写法 2、Render写法 区别：templat的写法可读性强，简洁。所以需要在合适的场景使用Render函数，否则会增加负担。
阅读全文
摘要：虚拟DOM是基于js计算的，开销会小很多。 虚拟DOM的运行过程： 组件中的template属性里的内容都会被编译为虚拟DOM。 工程使用webpack编译时，template都会被编译为render函数。
阅读全文
摘要：github地址：https://github.com/MengFangui/VueTabSwitch 1、index.html 2、tabs.js 3、pane.js 4、style.css 5、效果：
阅读全文
摘要：1、概述 Vue组件开发的API：props、events和slots 2、组件代码 github地址：https://github.com/MengFangui/VueInputNumber 效果： （1）index.html (2)input-number.js 说明：template的DOM结
阅读全文
摘要：1、概述 Vue在观察到数据变化时并不是立即更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生所有数据的改变。 在缓冲时会去除重复的数据，从而避免不必要的计算和DOM操作。 在下一个事件循环的tick中，Vue刷新队列并执行实际（已去重）的工作。 Vue是异步更新DOM（异步更新队列）。 $
阅读全文
摘要：使用场景：复用子组件的slot，又可以使slot的内容不一样。
阅读全文
摘要：1、概述 slot:混合父组件的内容和子组件的模板。 slot分发的内容，作用域在父组件上。 2、单个slot 子组件使用<slot>，在父组件模板里，插入子组件标签里的内容替换子组件slot标签以及它的内容。 3、具名slot
阅读全文
摘要：1、中央事件总线bus 2、父链 注：尽量少用，父子组件最好通过props和$emit来通信。 3、子组件索引 注：仅仅作为直接访问子组件的应急方案，避免在模板或者计算属性中使用$refs.
阅读全文
摘要：1、自定义事件 2、v-model
阅读全文
摘要：1、props通信 注意：DOM模板的驼峰命名props要转为短横分割命名。 传递动态数据（v-bind）： 2、单向数据流 （1）子组件保存父组件传递过来的值，在子组件自己的作用域下修改和使用。 （2）使用计算属性
阅读全文
摘要：（1）全局注册 （2）局部注册 （3）is挂载组件 table、ul、ol、select这些标签会限制其内的元素，这时可以使用is来挂载组件 （4）组件也可以有data，method，computed等属性。但是data是函数，数据需要return出去。 （5）解决多个组件之间数据共享问题 给组件返
阅读全文
摘要：1、v-model v-model不再关心初始化的value值。 效果： 2、单选 3、复选框 （1）单独使用时 v-model绑定布尔值 （2）组合使用 4、下拉列表 （1）单选下拉列表 （2）多选下拉列表 5、修饰符 （1）lazy （2）number 输入转为number类型 （3）trim
阅读全文
摘要：代码下载地址：https://github.com/MengFangui/VueShoppingCart 1、index.html 2、index.js 3、style.css 4、效果
阅读全文
摘要：1、$event 变量 $event 变量用于访问原生DOM事件。 2、修饰符 示例：
阅读全文
摘要：1、数据方法分类： （1）原数组改变 push pop unshift shift reverse sort splice （2）原数组未变，生成新数组 slice concat filter map 对于使原数组变化的方法，可以直接更新视图。 对于原数组未变的方法，可以使用新数组替换原来的数组，以
阅读全文
摘要：1、v-if v-else-if v-else 一次处理多个元素，使用template + v-if 2、v-show v-show控制的是display，同时不能在template上使用。 v-if与v-show的使用建议： v-if适合条件不经常改变的场景，因为它的切换开销大。 v-show适用
阅读全文
摘要：1、绑定class （1）对象语法 对象可以传入多个属性，：class可以与普通的class共存。 （2）数组语法 2、绑定内联样式 v-bind:style 给元素绑定内联样式，也有对象和数组语法写法。由于直接写一长串样式不便于阅读和维护，所以一般写在data或者computed里。 使用;sty
阅读全文
摘要：1、示例代码 2、在大多数情况下，只会使用默认的getter方法读取计算属性，业务中很少用到setter方法。 3、与methods的区别 methods方法一样可以实现计算属性： 区别：使用计算属性还是methos取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到
阅读全文
摘要：1、v-bind 动态更新元素属性 2、v-on 3、语法糖 v-bind可以简写为: v-on可以简写为@
阅读全文
摘要：1、数据双向绑定 2、生命周期 vued钩子与jquery的ready函数类似，比较常用的有： （1）created：实例创建完成后调用，需要初始化处理一些数据时比较有用。 （2）mounted：el挂载到实例后调用，一般第一个业务逻辑在这里开始 （3）beforeDestory：实例销毁前调用，用
阅读全文
摘要：1、概述 简单小巧：vue.js压缩后17k。 渐进式：一步一步有阶段性的使用。 2、MVVM模式 View的变动，自动更新至 ViewModel，反之亦然。 3、vue示例代码 浏览器显示为：
阅读全文
摘要：1、块级作用域 （1）使用let代替var 好处：变量应该只在其声明的代码块内有效；var命令存在变量提升效用，let命令没有这个问题。 （2）全局常量 在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。 const优于let有几个原因。一个是cons
阅读全文
摘要：1、概述 ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，
阅读全文
摘要：ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 vue框架的源码：https://gi
阅读全文
摘要：1、概述 Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of循环。 2、Iterator 接口 ES6 的有些数据结构原生
阅读全文
摘要：1、方法一 2、方法二（set方法去重） 3、方法三(使用对象记录重复的元素，以及出现的次数)
阅读全文
摘要：1、Reflect概述 ES6 为了操作对象而提供的新 API 2、Reflect设计目的 （1）将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。 （2）修改某些Object方法的返回结果，让其变得更合理。比如，Object
阅读全文
摘要：1、概述 Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过
阅读全文
摘要：1、Map结构 Map为“键值对”的数据结构 2、构造函数 作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。 3、键 Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。 如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要
阅读全文
摘要：1、属性和变量可以简写 2、Object.is 它用来比较两个值是否严格相等，与严格比较运算符（ ）的行为基本一致。 不同之处只有两个：一是+0不等于-0，二是NaN等于自身。 3、Object.assign Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复
阅读全文
摘要：push和unushift都是向数组插入元素。 push是向数组尾部插入元素。 unshift是向数组头部插入元素。 共同点：都可以一次插入多个元素。
阅读全文
摘要：1、...扩展运算符 该运算符将一个数组，变为参数序列。 作用：（1）代替aplly （2）将字符串转为数组 2、Array.from object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。 实际应用中，常见的类似数组的对象是 DOM 操作返回的 No
阅读全文
摘要：1、Number.isNan 和 Number.isFinite Number.isNaN()用来检查一个值是否为NaN Number.isFinite()用来检查一个数值是否为有限的（finite） ES5的2个方法，isFinite和isNaN，原理是先调用Number()将非数值的值转为数值，
阅读全文
摘要：1、字符串遍历接口 字符串可以被for...of循环遍历 2、include(),startsWith(),endsWith()方法 includes()：返回布尔值，表示是否找到了参数字符串。 startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。 endsWith()：返回布
阅读全文
摘要：1、数组解构，可以设置默认值 2、对象解构 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。 3、字符
阅读全文
摘要：1、const声明一个只读的常量。一旦声明，常量的值就不能改变。 2、const的作用域与let命令相同：只在声明所在的块级作用域内有效。 3、const命令声明的常量也是不提升，只能在声明的位置后面使用。 4、ES6中：var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面
阅读全文
摘要：1、实现块作用域 2、不存在变量提升。 ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
阅读全文
摘要：一、shim requirejs使用AMD规范开发，若开发过程中加载非AMD规范js，需要使用requirejs的shim进行配置。shim配置语法为： //配置文件 requirejs.config({ baseUrl: 'js', //默认是main.js所在的文件夹为基准。 paths: {
阅读全文
摘要：1、requirejs遵循AMD规范，将需要的都加载好（前置加载）。注：cmd是就近加载。 （1）AMD采用异步加载，模块的加载不影响它后面语句的执行。 （2）所有依赖这个模块的语句，都定义在一个回调函数中，等前面需要加载的模块加载完成后这个回调函数才运行，解决了依赖性的问题。 2、requirej
阅读全文
摘要：转自：http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/ 1、zoom的缩放是相对于左上角的；而scale默认是居中缩放； 2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面
阅读全文
摘要：DOM 是为了操作文档出现的 API，document 是其的一个对象； BOM 是为了操作浏览器出现的 API，window 是其的一个对象。 使用下图讲解： 归DOM管的： E区：即document 归BOM管的： A区：浏览器的地址栏，书签栏等 B区：右键菜单 C区：document加载时的状
阅读全文
摘要：三者区别见下表： 说明： cookie的处理过程为： 服务器向客户端发送cookie 浏览器将cookie保存 之后每次http请求浏览器都会将cookie发送给服务器端 对于 cookie，我们还需要注意安全性: sessionStorage注意问题： （1）页面刷新sessionStorage依
阅读全文
摘要：原理：浮动+margin负边距 示例代码： 效果： 鼠标悬浮效果：
阅读全文
摘要：1、display属性设置 先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响
阅读全文
摘要：1、文件大小比较 首先从cnd上（http://www.bootcdn.cn/）下载jquery和zepto。 jquery下载的是2.2.4版本压缩： zepto下载的是是1.20压缩版本： 二个文件大小比较： jquery.min.js 大小为：83.5k zepto.min.js大小为：25.
阅读全文
摘要：合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；ke
阅读全文
摘要：1、尊重对象所有权 不要为实例或原型添加属性； 不要为实例或原型添加方法； 不要重定义已存在的方法。 最佳的方法便是永远不修改不是由你所有的对象。所谓拥有对象，就是说这个对象是你创建的，比如你自己创建的自定义类型或对象字面量。而 Array 、 document 这些显然不是你的，它们在你的
阅读全文
摘要：1.正则表达式test方法 test() 方法用于检测一个字符串是否匹配某个模式 返回值： 如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。 2、正则表达式exec方法 exec() 方法用于检索字符串中的正则表达式的匹配。 返回值：
阅读全文
摘要：1、match方法 match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 match()方法的返回值为：存放匹配结果的数组。 2、replace方法 replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 replace方法的返
阅读全文
摘要：1.indexof方法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 语法： 注意：有可选的参数（即设置开始的检索位置）。 2、search方法 search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。 注意：search方法可以根据正
阅读全文
摘要：1、indexof方法 indexof方法可以在字符串和数组上使用。 2、字符串使用 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 3、数组使用 示例代码： 同时注意，数组使用indexof方法时的兼容情况，ie9以下浏览器不支持。
阅读全文
摘要：JavaScript的数组方法有： http://www.w3school.com.cn/jsref/jsref_obj_array.asp 其中：concat、join和slice方法都不会修改原数组。 说明：sort方法在使用时需加上比较规则。 示例代码：
阅读全文
摘要：在开发环境下，尽量不用间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。 尽量使用超时调用来模拟间歇调用。 示例代码：
阅读全文
摘要：1、forEach方法 语法： 参数： 示例： 控制台输出为： 2、each方法 语法： jQuery.each( collection, callback(indexInArray, valueOfElement) ) 参数： 回调函数的第一个参数为indexInArray（索引值），第二个参数v
阅读全文
摘要：一般认为：严格模式下this不允许指向全局对象。是函数体是否处于严格模式！ 如：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 需要说明的是：本身指向全局的this是没有问题的。 示例代码： 控制台输出为windo
阅读全文