有道云笔记整理更整洁好看：http://note.youdao.com/noteshare?id=a6654b066838295d4736c05cd49fbe84&sub=A9DA86F92E4543F8BF7DA6333F83EBAB
1.1 MVX模式是什么
MVC框架最早出现在JAVA领域，然后慢慢在前端开发中也被提到，后来又出现了MVP，以及现在最成熟的MVVM。
1.1.1 MVC
MVC是应用最广泛的软件架构之一，==一般MVC分为：Model（模型）、Controller（控制器）和View（视图）。==这主要是基于分层的目的，让彼此的职责分开。
View一般都是通过Controller来和Model进行联系的。Controller是Model和View的协调者，View和Model不直接联系。基本联系都是单向的。
用户（User）通过Controller来操作Model以达到View的变化。
1.1.2 MVP
MVP是从经典的MVC模式演变而来的，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。
在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。而且，Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。
1.1.3 MVVM
MVVM代表框架有：知名度相对偏低的Knockout、早期的Ember.js、目前比较火热的来自Google的angularJS，以及vue.js
相比前面两种模式，MVVM只是把MVC的Controller和MVP的presenter改成了ViewModel。view的变化会自动更新到ViewModel，viewmodel的变化也会自动同步到view上显示。（这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作）
1.2 Vue.js是什么
vue.js是一套用于构建用户界面的渐进式框架，被设计为可以自底向上逐层应用——它只聚焦视图层，是一个构建数据驱动的web界面的库。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。
vue.js特性
- 确实轻量
除了以MVP模式代表的Riot.js外，vue.js已经算是前端库里面体积非常小的，但不依赖其他基础库 - 数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便 - 指令
类似于angularJS，可以用用一些内置的简单指令（v-*）,也可以自定义指令，通过对应表达式值的变化就可以修改对应的DOM - 插件化
vue.js核心库不包含Router、Ajax、表单验证等功能，但是可以非常方便地加载对应的插件
引入vue的方式：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染
vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
除了文本插值，还可以像这样来绑定元素特性：
<div id="app-2">
<span v-bind:title="message"> < !-- 该元素节点的 title 特性和Vue实例的 message 属性保持一致 -->
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
v-bind特性被称为指令。指令带有前缀 v- ，以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。
条件与循环
控制切换一个元素是否显示：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: 'app3',
data: {
seen: true
}
})
继续在控制台输入 app3.seen = false ，之前显示的消息消失了。 这个例子演示了我们不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构。
此外，vue也提供了一个强大的过滤效果系统，可以在vue插入/更新/移除元素时自动应用过滤效果。
处理用户输入
为了让用户和你的应用进行交互，可以用 v-on 指令添加一个事件监听器，通过它调用在vue实例中定义的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
注意在 reverse Message 方法中，我们更新了应用的状态，但没有触碰DOM——所有的DOM操作都由Vue来处理，你编写的代码只需要关注逻辑层面即可。
Vue还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定：
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
组件化应用构建
组件系统是Vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树：
在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组件很简单：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
构建另一个组件模板：
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
但是这样会为每个待办项渲染同样的文本。我们应该能从父作用域将数据传到子组件才对，
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
完整例子：
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'], //子单元通过prop接口与父单元进行了良好的解耦
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
与自定义元素的关系
Vue组件非常类似于自定义元素——它是web组件规范的一部分，这是因为Vue的组件语法部分参考了该规范。但还是有几个关键差别：
- Web Components规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和Firefox 63+ 原生支持 Web Components。相比之下，Vue组件不需要任何polyfill，并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
- Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。
1.2.1 vue.js与其他框架的区别
1.与AngularJS的区别
它来自Google，是目前国内最或的前端框架之一，应用于pc类的复杂交互系统，我们内部也产出了一套基于它的PC UI组件库。
相同点：
- 都支持指令——内置指令和自定义指令
- 都支持过滤器——内置过滤器和自定义过滤器
- 都支持双向绑定
- 都不支持低端浏览器（比如IE6/7/8）
vue.js使用比如Array.isArray的ES 5特性 AngularJS1.3 开始不支持IE8
不同点：
-
AngularJS的学习成本比较高，比如增加了Dependency
Injection特性，而Vue.js本身提供的APII都比较简单、直观。 -
在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。
2.与React（来自Facebook）的区别
相同点：
-
React采用特殊的JSX语法，vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
-
中心思想相同：一切都是组件，组件实例之间可以嵌套。
-
都提供合理的钩子函数，可以让开发者定制化地去处理需求。
-
都不内置类似Ajax、router等功能到核心包，而是以其他方式（插件）加载。 在组件开发中都支持mixins的特性。
不同点：
- React依赖virtual DOM，而Vue.js使用的是DOM模板。react采用的virtual DOM会对渲染出来的结果做脏检查。
- vue.js在模板中提供了指令、过滤器等，可以非常方便、快捷地操作DOM。
3.与Knockout的区别
Knockout也是非常轻量的，甚至兼容IE 6+的MVVM框架。
相同点：
- 都用到了数据和DOM元素绑定。
- DOM元素都是基于模板的。
- 都追求UI和数据关联，自动刷新。
- 都支持依赖追踪。
不同点：
- Knockout的所有可观测属性都需要手动用observable方法来初始化，并且需要用函数调用的方式来操作数据。
- Knockout没有ViewModel之间作用域的继承。
4.与Ractive.js的区别
Ractive.js和Vue.js API很像，通过实例化一个Ractive类，传一个元素和一些数据、模板等，但是它用字符串模板，数据模型和Knockout一样用get和set，本身代码体积较大。