这段时间 在工作之余的休息时间，学习了解Vue ，学习Vue的设计思想，通过Vue官网学习Vue的语法，通过Vue前端技术，搭建构建了一个简单的项目，在项目学习完之后，发现Vue是一个很有意思的前端技术，没事就看了源码，第一次看的时候不知道如何下手，就开始在百度，谷歌，两大搜索神器的帮助下，找到了学习的快捷之路。发现了难啃的骨头，才是最有意思的事。
Vue框架到底为我们做了什么？
- 数据和视图分离，解耦(开放封闭原则)
1.所有数据和视图不分离的，都会命中开放封闭原则
2.Vue 数据独立在 data 里面，视图在 template 中 - 以数据驱动视图，只关心数据变化，dom 操作被封装
- 使用原生js是直接通过操作dom来修改视图，例如
ducument.getElementById('xx').innerHTML="xxx"
- 以数据驱动视图就是，我们只管修改数据，视图的部分由框架去帮我们修改，符合开放封闭模式.
如何理解 MVVM ？
- MVC
- Model 数据 → View 视图 → Controller 控制器
- MVVM
- MVVM不算是一种创新
- 但是其中的 ViewModel 是一种创新
- ViewModel 是真正结合前端应用场景的实现
- 如何理解MVVM
- MVVM - Model View ViewModel，数据，视图，视图模型
- 三者与 Vue 的对应：view 对应 template，vm 对应 new Vue({…})，model 对应 data
- 三者的关系：view 可以通过事件绑定的方式影响 model，model 可以通过数据绑定的形式影响到view，viewModel是把 model 和 view 连起来的连接器
我们来看一下最后我们要达到的效果
我们先来看下我们简单的结构
以上就是我们简单搭建的项目目录结构，有需要了解可以去阅读源码来了解更多，这里就不做过多的展开
我们先来看下我们index.html完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MiniMVVM 框架demo演示</title> <link rel="stylesheet" href="./css/mini-mvvm.css"/> </head> <body> <div id="app"> <h1>{{title}}</h1> <div> <span>文本输入框：</span> <input type="text" v-model="message"/> </div> <section> <samp>数据显示结果:</samp> <hr/> <span>{{message}}</span> </section> </div> <script type="text/javascript" src="js/mini-mvvm.js"></script> <script> var app=new MiniMVVM({ el:'#app', data:{ title:'Mini-MVVM demo演示', message:'Hello World ! ! !' } }); </script> </body> </html>
大家看到这里有没有发现，我们调用不是Vue 而是我们自己自定义的MiniMVVM，没错。那我们再来看看Vue的用法，帮大家回顾一下
<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
Hello Vue!
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
接下来是我们的函数类
(function () { //初始化类 class MiniMVVM {...} //模板编译类 class TemplateCompile {...} //数据劫持类，响应式 class Observer {...} //观察者 class Watcher {...} //发布订阅类 自定义事件 class Emitter {...} //存储指令和工具方法 let CompileTool = {...}; window.MiniMVVM = MiniMVVM; })();
这是我们mini版的函数类，这里我们只实现了简单的双向数据绑定，目的是为了让大家学习思想，以及理解分析
function initMixin (Vue) {...} function initInternalComponent (vm, options) {...} function resolveConstructorOptions (Ctor) {...} function resolveModifiedOptions (Ctor) {...} function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } this._init(options); } initMixin(Vue); stateMixin(Vue); eventsMixin(Vue); lifecycleMixin(Vue); renderMixin(Vue); /* */ function initUse (Vue) {...} /* */ function initMixin$1 (Vue) {...} /* */ function initExtend (Vue) {
如果让我们光来看Vue.js 就是一万两千行代码，我相信大多数和我一样，看到这么多行代码人已经崩溃了直接就选择了放弃，我们虽然是mini版的，我们也借助vue设计来写我们mini版。
