本文已参与「新人创作礼」活动，一起开启掘金创作之路。

之前被安排了一个小需求，后端基本上已经完成，之后就是前端的设计了。前端用的是 VUE 技术，而我对 VUE 还不是很熟练，多以就一边对着 官方文档 一边结合着之前其他人写的页面，边学边画，虽然进度很慢，但在这期间我感觉也对 VUE 逐渐熟悉了起来。这里就简单做一些小总结，记录一下自己学到了什么。

其实对于整个前端来讲，最核心的就是： 页面 HTML 开发，样式 CSS 开发，行为 JS 开发。

这三个合在一起就组成了“视图”，而 VUE 就是专注于视图的一种技术。不仅如此，VUE 中还包括很多其他东西，暂时我也还没接触到太多。

在真正了解 VUE 之前，要先理解 MVVM 模式。

MVVM 模式

全称 Model -- View -- ViewModel 模式，它类似于前面提到过的 MVC 模式，主要目的是将视图(View)和模型(Model)分离开来。

视图(View)

View是视图层， 也就是用户界面。前端主要由HTH L和csS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。

模型(Model)

Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

视图数据(ViewModel)

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。

View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的(比如页面的哪些地方展示什么内容，这些都属于视图状态(展示);页面加载进来时发生什么，点击什么东西发生什么事件，这里滚动时发生什么事件，这些都属于视图行为(交互))

视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是非常方便的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。