1.v-show和v-if之间的区别v-show：元素是一直存在的，当v-show为false时，元素display:none只是隐藏了而已，生命周期的钩子函数不会执行。

1.理解事件 事件行为本身：没有给事件绑定方法事件也是一直存在的，当触发行为的时候，也对触发对应的行为，只不过由于没有绑定事件，导致没有任何事件发生； 事件绑定：给元素绑定一个方法；触发行为，执行方法； 2.DOM事件 DOM0级事件：1️⃣(onclick)属于元素的私有属性；2️⃣使用DOM0级方法指定的事件处理程序被认为是...

方法1:ES6新特性Set {代码...} 方法2:利用对象名唯一 {代码...} 方法3:利用数组包含 [].includes [].indexOf {代码...} 方法4: 排序比较兄弟元素 {代码...} 方法5: 双循环比较 {代码...}

生成Tree的结构 原始数据 {代码...} 渲染成Tree结构 {代码...}

HTTP1.0中协议是无状态的，但在WEB应用中，在多个请求之间共享会话是非常必要的，所以出现了Cookie、cookie是为了辩别用户身份，进行会话跟踪而存储在客户端上的数据；

JSON简析 1.简介 JSON，是一种数据格式而不是编程语言，它和JavaScrip并没有从属关系，任何编程语言都可以使用JSON; 2.语法规则 JSON分为三类 简单值：与JS语法相同，可以在JSON中表示字符串，数值，布尔值和null，但是其不支持undefined; {代码...} 对象:键值和键名都得用双引号； {代码...} 数组； {代码...} 3.解析和...

Vue核心原理之数据的深度响应 1.问题的引入 为什么点击下面的button界面会出现自增？ {代码...} 为什么数据发生变化之后，视图就发生变化？ 本文从三个方面来理解Vue处理深度响应的原理： 数据定义； 数据绑定； 数据响应； 2.数据的定义 组件中定义数据{counter:0}； 初始化过程中，会执行observe(data, this)； 在obse...

1.Array数组的方法 Mutator方法————"突变方法"会改变数组自身的值； Accessor方法————"访问方法"不会改变数组自身的值； Iteration方法————"遍历的方法" ； 2.Mutator方法 ①[ ].push—作用：将一个或多个元素添加到数组的末尾，传参：（单个或多个数组元素）；返回值：新数组的长度； {代码...} ②[].pop()，作用：删除最...

1.Angular4指令分类 组件（Component directive）：UI组件，继承于Directive； 属性指令（Attribute directive）：改变组件的样式； 结构指令（Structural directive）：改变DOM布局； 2.组件（Component directive） 代码实例 {代码...} 组件的组成：@Component()里里里面的Template(HTML,CSS)；以及export class组件里...

1.发布订阅模式 介绍：常被称作观察者模式，或者消息机制，定义了一种依赖关系，主要是用来解决对象之间的耦合； 用例: ①Vue实现数据的深度响应，就用到了发布订阅模式的原理，视图订阅了其依赖的数据，数据改变则会通过notify，通知视图去刷新； ②D3.js的事件机制dispatch，也是通过利用了发布订阅模式； 特点：一般在...

VueImgSlider A simple Img slider component 提供简单跑马灯效果 循环无间歇滚动 水平和垂直 demogithub地址 {代码...} {代码...}

③数组：通过劫持数组的原型方法；将所有可能使得数组产生变化的方法劫持，当数据调用这些方法的时候，dep.notify()，会通知依赖于此数据的视图update();但是这样做会产生2个问题，如下： {代码...}

定义：每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等，不同的时期对应不同的周期；

前言 highlight官方用法如下： {代码...} 在使用vue开发的时候，很多人遇到如何使用的问题，一种方案是用过指令来实现，例如这篇文章介绍的[链接]； 上述方法存在一定的局限，若是从服务器拿来的数据前端渲染，则会出现问题； 1.highlight.js的基本原理 从官方用法可知，在使用前要引入CSS,highlight.js文件然后通过hljs...

webpack模块化原理简析 1.webpack的核心原理 一切皆模块：在webpack中，css,html.js，静态资源文件等都可以视作模块；便于管理，利于重复利用； 按需加载：进行代码分割，实现按需加载。 2. webpack模块化原理：以js为例，分析webpack构建common.js的模块化方式。 ①构建示例代码 {代码...} ②分析bundle.js a.整体结构：...

②lily是People的子类，首先lily也是一个类；extends的过程中创建了一个自执行函数，并将父类传进去，继承父类之后再返回该子类。lily.__proto__指的是当前对象所属类的原型,也就是Object.getPrototypeOf(lily). {代码...}

ES6 class原理 1.通过构造函数声明类 {代码...} 2.通过es6的class声明类 {代码...} 3.es6 class原理 首先得了解原型链的基础知识[链接]； 分析：①People是一个类，也是一个函数；②constructor是一个对象指向的是People函数，该函数还挂了name和age属性；③将say函数挂载People的原型上。 代码 {代码...}

2.构造函数：自定义构造函数，可以自定义对象类型的属性和方法。 {代码...} new的过程做了三件事①创建了一个对象；②将this指向这个对象；③返回这个对象；

webpack简易学习教程 1.为什么要用webpack？ 模块化开发 代码压缩，合并，提取公共代码， 编译ES6,CoffeeScript； Scss，Less等css预处理器 2.webpack简易入门 安装npm isntall webpack -g 配置webpack.config.js ， {代码...} 配置package.json：运行npm run build 启动编译模式和npm run start热更新模式。 {代码...} ...

基础使用：同样是实现data中数据的反转表示，有以下两种不同写法，，显然第一种比第二种结构简洁和清晰，特别是在多次使用的时候，template里面的代码将更加混乱。 {代码...} {代码...}

handsontable是目前在前端界最接近excel的插件，可以执行编辑，复制粘贴，插入删除行列，排序等复杂操作。jQuery、react、ng和vue版本，功能强大，是复杂表格的不二之选。本文简单介绍在vue-cli环境下怎么使用。

Vue书店 demo地址源码地址 1.案例所用技术 vue-cli脚手架； vue-router路由管理； vuex2.0状态管理; iview视图; 2.能有什么收获 初步熟悉vue-cli手交架； 初步学会处理vue-router路由管理，状态管理的内容，以及用iview简单布局； 3.书店的功能需求 主导航是首页、书单、以及图书管理； 图书管理包含添加图书、修改图书...

基于Vue+D3.js的仪表图组件 实现的效果如下图所示 1.定义data数据，实现组件的可定制化 panel组件能定制的参数包括以下几项 {代码...} 2.处理数据函数setConfig() 处理config数据 {代码...} 3.render函数 3.1获取数据 {代码...} 3.2添加svg {代码...} 3.3画外圆 {代码...} 3.4画内圆 {代码...} 3.5画颜色区域 {代码...} ...

Vue拖拽 {代码...} {代码...}

背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

背景：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。那我们想一步操作怎么办？

Vue 和D3.js构建简单曲线图 1.说明 采用Vue-cli脚手架; 采用原生D3.js; 曲线图。 分析 {代码...}

上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变 state里面的数据)，Vue的视图是由数据驱动的，也就是说state里面的数据是动态变化的，那么怎么改变呢，切记在Vuex中store数据改变的唯一方法就是mutation！

在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计...

上一篇文章说了，Vuex就是提供一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。