MVVM模式
什么是MVVM模式？
MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是用这个技术开发桌面应用程序的）和 Silverlight（类似于 Java Applet，简单点说就是在浏览器上运行的 WPF） 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。 由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表。MVVM 已经非常成熟了，当下流行的 MVVM 框架有 Vue.js ， AngularJS 等。
MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：
- 该层向上与视图层进行双向数据绑定。
-
向下与Model层通过接口请求进行数据交互。
MVVM模式示意图
为什么要使用MVVM？
MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），它有几大好处：
- 低耦合： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
- 可复用： 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
- 独立开发： 开发人员可以专注于业务逻辑和数据的开发。（ViewModel），设计人员可以专注于页面设计。
- 可测试： 界面素来是难以测试的，而现在测试可以针对 ViewModel 来写。
所有的架构本质上都是为了解耦。、
MVVM的组成部分
MVVM架构如下图所示。
View
View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现ViewModel 或者 Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf 等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言。
Model
Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。
ViewModel
ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。
需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的。
- 页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）。
- 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）。
视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。
由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。
MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与Model 层交互，这就完全解耦了 View 层和 Model 层。这个解耦是至关重要的，它是前后端分离方案实施的重要一环。
第一个Vue程序
什么是Vue？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
测试第一个程序
1、编写视图层，这里使用了Vue的插值表达式{{data中的变量}}。
<div id="app">
{{message}}
</div>
2、编写Vue对象，需要先导入vue.js。
<script src="../lib/vue.js"></script>
<script>
//ViewModel Vue对象
var vm=new Vue({
//1、绑定前端页面,和jquery绑定一样
el:'#app',
//2、连接后台数据
data:{
//未来这里的数据是从后台获取的
message:'hello vue!'
}
})
</script>
3、给data中的变量message提供数据。
message:'hello vue!'
Vue的基本指令
在创建Vue示例时，我们可以使用console.log在浏览器控制台打印一下Vue实例对象，查看打印的信息，可以看到Vue实例对象中有些函数带$，有些函数不带$。带$ 的是Vue实例对象自带的函数，不带$的是我们自己定义的函数。
一个完整的前端项目应该包含以下部分：
- 视图 v-bind(HTML+JS)
- 事件 v-on(JS)
- 判断 v-if
- 循环 v-for
- 双向绑定 v-model（表单中的常用标签都可以进行绑定）
- 通信 （Vue是专注于视图层的框架，没有通信功能，官方推荐使用axios）
v-bind
Vue的基本指令一般形式为：v-xxx，和Thymeleaf的th:xxx类似。
v-bind 用于绑定数据和元素属性。由于v-bind经常使用，因此可以简写为:。示例代码如下：
<!--v-xxx vue的指令-->
<!--v-bind:title 类似于 th:title-->
<div id="app" >
<!--通过v-bind绑定vm中的data数据-->
<p v-bind:title="message">这是标题</p>
<!--由于v-bind常常使用，可以简写为:-->
<p :title='message'>这是标题</p>
</div>
<script src="../lib/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'时间：'+new Date().toLocaleString()
}
})
</script>
v-if
v-if 用于条件判断，当判断为真，会对条件块进行渲染，否则不渲染。示例代码如下：
<div id="app" >
<!--如果返回true则显示这个标签，否则隐藏-->
<h2 v-if="type==='A'">type=A</h2>
<h2 v-else-if="type==='B'">type=B</h2>
<h2 v-else-if="type==='C'">type=C</h2>
<h2 v-else>type=other</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
type:'A'
}
})
</script>
v-for
v-for 用于循环或遍历对象。示例代码如下：
<!--vue是一个专注于视图层的框架，相当于一个模板，自动套数据就好了-->
<!--在html中的固定模板-->
<div id="app" >
<!--遍历items,每一个节点为item-->
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script src="../lib/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
//mock数据
items:[
{message:'hello vue'},
{message:'hello wunian'}
]
}
})
</script>
v-on
v-on 用于事件监听。和v-bind一样也被经常使用，因此可以简写为@。示例代码如下：
<div id="app" >
<!--v-on也是经常使用的，可以简写为@-->
<button v-on:click="sayHello">点我</button>
<button @click="sayHello">点我</button>
</div>
<script src="../lib/vue.js"></script>
<script>
//获取当前对象，在vm中直接使用this即可
var vm=new Vue({
el:'#app',
data:{
message:'hello v-on'
},
//所有的方法都放在这里，放在vm中的方法可以通过v-on指定进行调用
methods:{
sayHello:function(){
alert(this.message)
}
}
})
</script>
v-model
v-model 用于表单数据的双向绑定。当数据变化时绑定的表单的值也会变化，同样当表单的值变化时绑定的数据也会变化。示例代码如下：
<div id="app" >
<!--v-bind 绑定data中的值，只能显示data中的值-->
<input type="text" :value="searchMap.keyword">
<!--v-model 双向绑定，可以显示data中的值，但是值改变了，data也会变
一般用在表单中
-->
<input type="text" v-model="searchMap.keyword">
</div>
<script src="../lib/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
searchMap:{
keyword:'wunian'
}
}
})
</script>
Vue的生命周期
下图展示了实例的生命周期。随着我们的不断学习和使用，它的参考价值会越来越高。
关注两个最常用的钩子函数：
-
created：Vue实例创建后调用，在模板渲染成html前调用。通常用于初始化某些属性值，然后再渲染成视图。例如可以在created函数中调用ajax获取页初始化所需的数据。 -
mounted：el被新创建的 vm.$el替换，并挂载到实例上去之后调用，在模板渲染成html后调用。通常用于初始化页面完成后，再对html的dom节点进行一些需要的操作。
axios
axios是一个易用、简洁且高效的http库，用于通信。例如在页面加载完成后访问后端请求获取数据，示例代码如下：
<!--使用axios-->
<script src="../lib/axios.js"></script>
<script>
var vm=new Vue({
el:'#app',
data(){
//编写对象格式，是空的，可以把它看成一个模型
return{
info:{
name:null,
address:{
street:null,
country:null
},
url:null
}
}
},
// 获取后端或者mock数据！
mounted(){ // 在页面加载完成之前执行！ 跨域问题！一般都在后端解决，解决响应头信息！
axios
.get('localhost:8080/getUser')
.then(response=>(this.info = response.data));
// response 就是请求响应回来的数据
}
</script>
组件
组件，其实就是自定义标签，其内容定义在template中。示例代码如下：
<div id="app" >
<!-- 组件：自定义标签，内容就是template-->
<component-li v-for="item in items" v-bind:comitem="item">
</component-li>
</div>
<script src="../lib/vue.js"></script>
<script>
//先注册一个组件
Vue.component('component-li',{
props:['comitem'],
template:"<li>Hello li</li>"
})
var vm=new Vue({
el:'#app',
data:{
items:['1.xxx','2.xxxx','3.xxx']
}
})
</script>
路由
在Vue中使用Vue-router来创建路由，页面路由实际上就是一个个a链接。其原理和使用场景如下图所示。
使用vue-router之前需要先安装。
npm install vue-router
示例代码如下：
<div id="app" >
<!--页面 路由就是a链接-->
<router-link to="/">首页</router-link>
<router-link to="/student">学员</router-link>
<router-link to="/teacher">老师</router-link>
<!--页面视图渲染-->
<<router-view></router-view>
</div>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<script>
//1、定义路由组件
const Welcome={template:'<div>欢迎</div>'}
const Student={template:'<div>Student</div>'}
const Teacher={template:'<div>Teacher</div>'}
//2、定义路由（核心）
const routes=[
//请求这个路由会跳转到对应的视图中
{path:'/',redirect: "/welcome"}, //重定向到请求
{path:'/welcome',component: Welcome},//组件直接对应上面定义的组件即可
{path:'/student',component: Student},
{path:'/teacher',component: Teacher},
]
//3、创建router实例
const router=new VueRouter({
//routes:routes（如果同名的话可以缩写）
routes
})
var vm=new Vue({
el:'#app',
router
})
</script>
vue-cli
vue-cli是官方的脚手架工具，以后我们的项目都使用vue-cli来创建。
全局安装vue-cli工具。
npm install vue-cli -g
安装完成后，使用如下命令进行检测。
vue list
如果输出了如下图所示信息说明vue-cli安装成功。
创建项目后可以使用如下命令进行初始化。
vue init webpack 项目名
