react: 新建.js文件， 书写class，render
vue： 新建.vue文件， 书写template
react: state = { a: xxx, b : xxx }
vue: data(){
return {
a: xxx,
b: xxx
}
}
react: this.setState({状态名: 新的值}) (基于MVC，需要让setState通知更新)
vue: this.状态名 = 新的值 (基于MVVM会触发set通知watch更新)
当key相同时，且元素类型相同，会进行最小粒度更新，而key不同的时候，新旧虚拟dom对比，react||vue会认为是不同的两个元素，会直接进行替换。
使用数组的map方法，将每一个结构return出去
例：typeList.map(item=>{
return <Button getBtn={getBtn} type={item.type} key={item.id}>{item.name}</Button>
})
v-modal是表单控件的双向绑定指令，将表单控件的value值交给状态管理，在表单控件上绑定change事件，当表单控件的value值改变，立即触发change方法，在change方法中通过拿到事件对象改变value的状态并通知视图更新，便实现了双向绑定的原理！
因为函数的作用域是独立的，防止data中的数据被同一种组件的不同实例所影响。
Vue.js（读音 /vjuː/, 类似于 view ） 是一套构建用户界面的 渐进式框架 。与其他重量级框架不同的是Vue 的核心库只关注视图层。
Vue.js 的目标是通过尽可能简单的 API 实现 响应的数据绑定 和 组合的视图组件 。
Vue.js是一种MVVM框架，其中html是view层，js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变；
解读：
【demo】
【TIP】
Vue实例所代理data对象上的属性只有在实例创建的同时进行初始化才具有响应式更新，若在实例创建之后添加是不会触发视图更新的；
解读：
解读：
【demo】
【demo】
解读：
解读：
【demo】
解读：
【demo】
本章涉及Vue的基础的数据绑定操作，内容包括：
解读：
解读：
Vue实例的 computed 对象默认只有getter，如果你要设置数据，可以提供一个setter，即设置器；
解读：
【TIP】无论是哪种方式，前提都是css中的class要先设定
【demo】
解读:
【demo】
前面简单介绍了一下 v-if 、 v-for 和 v-on 指令，下面的部分将详细介绍以上3个指令；
解读：
【TIP】 v-if和v-show的区别
【demo】
解读：
【demo】
【demo】
解读：
解读：
【demo】
解读：
解读：
像这些包含固定样式的元素 <ul>， <ol>， <table>， <select>，
自定义组件中使用这些受限制的元素时会导致渲染失败；
通的方案是使用特殊的 is属性：
解读：
解读：
【demo】
解读：
内容分发 指的是混合父组件的内容与子组件自己的模板；
解读：
解读：
【TIP】关于组件的命名规范
【demo】
【TIP】
这个$http请求和jquery的ajax还是有点区别，这里的post的data默认不是以form data的形式，而是request payload。解决起来也很简单：在vue实例中添加headers字段:
【Hello Vue.js】
上面的Vue小作品是小羊仿照 SegmentFault 的一篇技博的练手之作，建议各位对照源码亲手练习一次，以便初步熟悉Vue的使用；
参考资料：
分析该过程，可拆分成两个步骤：
该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative子 mask 容器设置 position: absolute并且其宽、高、偏移值根据鼠标当前位置动态计算
该部分逻辑实际上可拆分为 4 个步骤：
1. 给 box 绑定 mousedown 事件
2. mousemove 事件，比较简单，只是更新 end_x，end_y 坐标
3. mouseup 事件，移除 mousemove、mouseup 事件，并调用判断方法
4. 处理框选逻辑
难点是如何判断元素是否被框选住
问题可转化为 框选矩形是否与 checkbox 矩形 相交或者包含在内,即 两矩形是否相交或者存在包含关系
假定矩形 A1 左上角坐标为 (x1,y1)矩形宽度为 width1,高度为 height1
假定矩形 A2 左上角坐标为 (x2,y2)矩形宽度为 width2,高度为 height2
画图分析，只看水平方向：
由图可以得出，x 方向上：
令 maxX = Math.max(x1 + width1, x2 + width2)
令 minX = Math.max(x1, x2)
若相交或包含则必满足： maxX - minX <= width1 + width2
同理可以容易得到 y 轴相交的判断
使用 Element.getBoundingClientRect()获取 dom 元素位置信息
该部分逻辑如下，比较简单
难点已经攻破，遍历 checkbox 集合，每个 checkbox 都执行上面的矩形相交判断，并进行相应的勾选处理，此处不再多累述
源码
END
