Vue简介
Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。
框架和库的区别
框架：是一套完整的解决方案，对项目的入侵性较大，项目如果需要替换框架，则需要重新架构整个项目
库（插件）：提供某一个小功能，对项目入侵性小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求
MVVM
MVVM的发展历程
MVVM是Model-View-ViewModel的缩写，最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离；而把Model和View关联起来的就是ViewModel，ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
vue工作机制
vue生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入门</title>
</head>
<body>
<div id="app">
<!-- vue模板语法{{}}双大括号，react{} -->
<!-- {{}}可以简单的理解为方法中返回的值 -->
<div>{{ msg }}</div>
<div></div>
</div>
<!-- 引包 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
<!-- 创建实例化对象-->
var vm = new Vue({
el : '#app', // 目的地
// 数据发生改变时，视图也会随即发生改变 **数据驱动视图**
data : { // 数据属性
// 既可以是对象，也可以是函数
msg : 'hello,vue!',
template: '<h2>{{ msg }}</h2>' // 如果在template中定义了内容，那么会优先加载template，如果没有定义内容那么加载的将会是#app的模板
}
})
consloe.log('vm', vm)
// vm出了自己定义的属性之外，还暴露了一些常用的实例属性与方法（都有$前缀）
</script>
</body>
</html>
MVC的模式中，MVVM设计思想
## MVC设计模式（View和Model之间不能直接通信）
MVC是一种[架构](http://lib.csdn.net/base/architecture "大型网站架构知识库")模式，M表示Model，V表示视图View，C表示控制器Controller：
* Model负责存储、定义、操作数据；
* View用来展示给用户ui界面，用户进行交互；
* Controller是Model和View的协调者，Controller把Model中的数据拿过来给View使用。Controller可以直接与Model和View进行通信，而View不能与Controller直接通信。当有数据更新时，Model也要与Controller进行通信，这个时候就要用Notification和KVO，这个方式就像发广播一样，Model发信号，Controller设置接收监听信号，当有数据更新是就发信号给Controller，Model和View不能直接通信，这样违背MVC设计原则。View与Controller通信需要利用代理协议的方式，Controller可以直接根据Model决定View的展示。View如果接受响应事件则通过delegate，target-action，block等方式告诉Controller的状态变化。Controller进行业务的处理，然后再控制View的展示。
* 那这样Model和View就是相互独立的。View只负责页面的展示，Model只是数据的存储，那么也就达到了解耦和重用的目的。
网友评论