关于vuemvc的信息
Vue学习系列一 —— MVVM响应式系统的基本实现原理
MVVM是Model-View-ViewModel的简写。它模式是MVC—MVP—MVVM的进化版。
Model负责用JavaScript对象表示，View负责UI界面显示，两者做到了最大限度的分离。
而把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的界面修改同步回Model更新数据。
脏值检查 : angular.js 是通过脏值检测的方式来比对数据是否有变更而决定是否更新视图。
原理是，拷贝一份 copy_viewModel 在内存中,用户操作导致 viewModel 发生改变的行为时，框架都会把 copy_viewModel 和最新的 viewModel 进行深度比较，一旦发现有属性发生变化，则重新渲染与之绑定的DOM节点。
最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular触发时进入脏值检测。但只限 指定的事件 (如：用户点击，输入操作，ajax请求，setInterval，setTimeout等...)，否则需手动调用 apply 函数去强制执行一次脏检查。
数据劫持 : vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter 在数据变动时发布消息给订阅者，触发相应的监听回调，而产生更新数据和视图。
原理图告诉我们，data属性定义了getter、setter对属性进行劫持，当属性值改变是就会notify通知watch对象，而watch对象则会重新触发组件呈现功能，继而更新view上的DOM节点树。
反之，view上输入数据时，也会触发data变更，也会触发订阅者watch更新,这样子model数据就可以实时更新view上的数据变化。这样一个过程就是vue的数据双向绑定了。
vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过 Object.defineProperty() 来实现对属性的劫持，达到监听数据变动的目的。
Object.defineProperty 是ES5一个方法，可以直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象，对象里目前存在的属性描述符有两种主要形式： 数据描述符 和 存取描述符 。
数据描述符 是一个拥有可写或不可写值的属性。
存取描述符 是由一对getter-setter函数功能来描述的属性。
描述符必须是两种形式之一；不能同时是两者。即：有值和可写，或者可get和set
属性描述符包括：
我们已经知道怎么实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器 Observer ，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者 Watcher 看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器 Dep 来专门收集这些订阅者，然后在监听器 Observer 和订阅者 Watcher 之间进行统一管理的。接着，我们还需要有一个指令解析器 Compile ，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者 Watcher ，并替换模板数据或者绑定相应的函数，此时当订阅者 Watcher 接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。
因此接下去我们执行以下4个步骤，实现数据的双向绑定：
深入响应式原理
剖析Vue原理实现双向绑定MVVM
《响应式系统的基本原理》.js
JavaScript实现MVVM之我就是想监测一个普通对象的变化
vue框架是干什么的
Vue 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能地驱动复杂的单页应用。
MVC和MVVM的区别 & vue的虚拟DOM的理解
MVC: M,即model,指数据层 V,指view, 即视图层 C, controller,控制器
View层发起数据请求，Controller层接到请求后，接收参数，把命令传向Model层，Model层处理数据后，把数据传回controller,而controller把数据传回客户端，也就是view层
典型代表： nodejs的Egg框架， php的ThinkPHP框架都是使用的MVC模式
MVVM: M: model,数据层 V: view，视图层，即UI , VM （ViewModel）是视图层和数据层的中间层
典型代表： Vue框架
Vue的双向数据绑定就得益于MVVM框架， 视图层改变，底层封装好的VM层会更新数据，而数据改变，VM层会更新视图
一、虚拟DOM就是一个JS对象，用它来描述真实DOM
二、为什么要用虚拟DOM
越多的真实dom操作，越损耗性能
而用虚拟dom操作数据要大大的减少性能损耗，提高渲染效率
二、虚拟DOM的渲染流程
1、获取数据
2、根据数据创建VDOM （相当于给对象赋值）
3、根据VDOM渲染生成真实DOM ( 根据createElement(‘DIV’) )
4、当数据发生改变后，又会生成新的VDOM
5、通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来，然后再进行真实DOM渲染，
一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’
mvc与mvvc 与vue
mvc的一点东西
mvvc它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。
view与viewModel(取代mvc中的controller)双向通信
Model与ViewModel双向通信
双向绑定
当内存里某个数值改变的时候会反映到页面上
页面上用户使某个数值改变了就会反映到内存里
例如vue
input中内容变化会使{{n}}变化
用了vue感觉一下就变得容易了很多，几乎不需要dom的操作
但是一旦出现了问题没有扎实得原生js基础很难解决
vue这些框架使前端变得复杂但是容易了，
用jq出现问题很容易解决，大不了用原生js就行了，但是vue出现问题很难快速换其他的方法。
因此在基础不好，对mvc/mvvc不了解的情况下不建议使用vue等框架容易产生依赖不利于深入学习，出现问题又不好解决。
Vue基本用法
Vue:渐进式javascript框架
声明式渲染--组件系统--客户端路由--集中状态管理--项目构建
Vue的基本使用
Vue的两种挂载方式:
模板语法:
1.插值表达式
存在闪动问题:快速刷新浏览器时,有时会显示{{xxx}}内容,然后替换为要显示的值.解决的办法--指令(先隐藏,替换好值之后再显示)
2.指令(指令的本身就是自定义属性)
以v-开头 例如v-cloak
html:
js
效果:
使用v-cloak
html:
css:
效果:
在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。
双向数据绑定:v-model
2.MVVM私享
M(model)
V(view)
VM(view-model)
mvc,mvp和mvvm的区别:
3.事件绑定
事件冒泡和事件捕获
3.1v-on指令
示例:
效果:
3.2事件函数的调用方式
html:
js
3.3事件函数参数传递
普通参数和事件对象
3.4事件修饰符
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。
html:
js:
e.prevent等同于
event.preventDefault()
3.5按键修饰符
在Vue中可以通过 config.keyCodes 自定义按键修饰符别名
示例:Vue.config.keyCodes.aaa = 65;
自定义按键:
4.属性绑定
v-bind指令:被用来响应地更新 HTML 属性
html:
js:
效果:
5.v-model的实现原理分析
①
等价于
②
第一种实现只是后面两种写法的语法糖.
当在input元素中使用v-model实现双数据绑定，其实就是在输入的时候触发元素的input事件，通过这个语法糖，也能够实现父子组件数据的双向绑定.
父组件:
子组件:
6.样式绑定v-bind:class
1??class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
①动态切换多个class
html
css
js
效果:
②样式绑定到对象
③数组语法:
默认class会被保留合并
2??style
三元表达式:
7.分支循环结构
7.1
v-show与v-if的区别:
v-show:
v-if:
1.原理
2.应用场景
7.2 循环结构
为什么需要独一无二的key的简单示例:
效果:
点击查看更多:
v-for:需要key的原因:
v-for遍历对象
为什么尤雨溪尤大说VUE没有完全遵循MVVM?
严格的MVVM要求View不能和Model直接通信，而Vue在组件提供了$refs这个属性，让Model可以直接操作View，违反了这一规定，所以说Vue没有完全遵循MVVM。
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。
同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。
MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。
因为WPF技术出现，从而使MVC架构模式有所改进，MVVM 模式便是使用的是数据绑定基础架构。它们可以轻松构建UI的必要元素。
可以参考The Composite Application Guidance for WPF(prism)
View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。
往一个应用程序上贴一个界面越容易，外观设计师就越容易使用Blend来创建一个漂亮的界面。同时，当UI和功能越来越松耦合的时候，功能的可测试性就越来越强。
在MVP模式中，为了让UI层能够从逻辑层上分离下来，设计师们在UI层与逻辑层之间加了一层interface。无论是UI开发人员还是数据开发人员，都要尊重这个契约、按照它进行设计和开发。这样，理想状态下无论是Web UI还是Window UI就都可以使用同一套数据逻辑了。
借鉴MVP的IView层，养成习惯。View Model听起来比Presenter要贴切得多；会把一些跟事件、命令相关的东西放在MVC的'C',或者是MVVM的'Vm'。