Vue入门教程（一）之基本使用
1、MVVM简介
如果你是第一次学前端，那么本节知识一定要了解，什么是MVVM。
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。是一种简化用户界面的
事件驱动编程方式
。
下边我们来画张图来大体了解下MVVM的工作原理图：
该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互
（1）View
View是视图层， 也就是用户界面。前端主要由HTH L和csS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。
（2）Model
Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
（3）ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。
View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的
视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。 MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。 View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。
2、为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点
（1） 低耦合
。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
（2） 可重用性
。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
（3）独立开发
。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
（4）可测试
。界面素来是比较难于测试的，测试可以针对ViewModel来写
3、VUE概述
（1）什么是vue?
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
这是官网给出的介绍，可能不是那么容易理解。简单来说，Vue是一个视图层框架，帮助我们更好的构建应用。
使用Vue和原生JS一个最显著的差别就是，Vue不再对DOM直接进行操作，而是通过对数据的操作，来改变页面。使用Vue构建的页面，是有一个个的组件组成的，当组件中定义的数据发生变化时，组件的显示也会跟着变化，且此过程无需刷新页面。
（2）MVVM模式的实现者
Model：模型层， 在这里表示JavaScript对象 View：视图层， 在这里表示DOM(HTML操作的元素) ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者 在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者
ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新 ViewModel能够监听到视图的变化， 并能够通知数据发生改变 至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定
（3）为什么要使用Vue
易用：熟悉HTML、CSS、JavaScript之后，可快速度上手vue。学习曲线平稳。
轻量级：Vue.js压缩后有只有20多kb，超快虚拟DOM
高效：吸取了Angular(模块化) 和React(虚拟DOＭ) 的优势， 并拥有自己独特的功能
开源：文档齐全，社区活跃度高
4、VUE之Hello World!
步骤一：
创建空文件
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>Document</title></head><body></body></html>
步骤二：
引入vue.js (本人下载的开发版的vue.js，跟本html文件放在了同一目录下，所以直接引用)
<script type=”text/javascript” src=”vue.js”></script>
步骤三：
创建vue实例
<script type=”text/javascript”> var vm = new Vue({ el:’#APP’, data:{ msg:’Hello World’ } });</script>
步骤四：
数据与页面元素绑定
<div id=”app”> {{msg}}</div>
完整的html
<!DOCTYPE html><html lang=”en”><body> <div id=”app”> {{msg}} </div> <script type=”text/javascript” src=”vue.js”></script> <script type=”text/javascript”> var vm = new Vue({ el:’#app’, data:{ msg:’Hello World’ } }); </script></body></html>
浏览器打开：
参数分析：
el : ‘#app’ — 绑定元素的ID（元素的挂载位置，值可以是CSS选择器或者是DOM元素）
data : { msg : ‘Hello World’ } — 模型数据，属性名：msg 值：Hello World
{{msg}} : 在绑定的元素中使用{{ }}将Vue创建的名为msg的属性包起来， 即可实现数据绑定功能，我们在调试状态下手动修改下msg的值，在不刷新页面的情况下就会展示我们修改后的值，这就是借助了Vue的数据绑定功能实现的。 MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应
下一篇：VUE入门教程（二）之模板语法（指令）
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126483.html
starterknow