Vue.js 入门

标签：接口   管理系统   依赖   理解   专注   dom   offic   分离   javascrip   

本文对渐进式框架和MVVM等概念做个简介，并简单运用Vue.js（一套构建用户界面的渐进式框架）来构建API项目的后台管理系统。

什么是MVVM

Model–View–ViewModel（MVVM）是一种创建用户界面的软件架构设计模式，其中Model就是数据模型，View就是我们的视图，ViewModel就是一个视图模型，用来绑定数据模型和视图上面的dom元素。

MVVM 源自于经典的 Model–View–Controller（MVC）模式（期间还演化出了 Model-View-Presenter（MVP）模式，可忽略不计）。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

MVVM 模型示意图：

MVVM 的各个组成部分 ：

——引用自前后端分手大师——MVVM 模式

什么是渐进式框架

渐进式——在原有项目中，可以先尝试引入一两个组件，可以当插件用....甚至也可以用它来开发整个项目！换句话，站在使用者的来说：“给你一个空屋，至于你需要什么自己一件件添，而不是那种家居家电全齐，自己不喜欢再一件件的扔了，甚至required 必须用且耗费空间的！”

——引用自什么是渐进式框架？React虚拟Dom理解？

它给你提供足够的optional，但并不主张很多required，也不多做职责之外的事！这就是渐进式。

——引用自《Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？》

什么是 Vue.js

Vue.js 是一套构建用户界面的渐进式框架，专注于MVVM 模型的 ViewModel 层。

Vue.js 不仅简单、容易上手、配置设施齐全，同时拥有中文文档。

对于使用 Vue.js 的开发者来说，我们仍然可以使用 熟悉的 HTML 和 CSS 来编写代码。并且，Vue.js 也使用了 Virtual DOM、Reactive 及组件化的思想，可以让我们集中精力于编写应用，而不是应用的性能。

——引用自《我的职业是前端工程师【四】：如何选择合适的前端框架，告别选择恐惧症》

Vue.js 是一套构建用户界面的渐进式框架。它是一个开源框架，最新版本已经更新到了2.0，是一个独立的Javascript框架，不依赖于任何其他框架（例如jquery）。

Vue.js开源地址：https://github.com/vuejs/vue

Vue.js英文文档：https://vuejs.org/

Vue.js中文文档： https://vuefe.cn/

Vue.js各种资源：https://github.com/vuejs/awesome-vue#official-resources

Vue.js简单实例

现有个 .NET API 项目，需要建立一个简易的后台管理系统，来管理后台用户和应用授权信息。原有的后台管理系统，功能比较完善和庞大，对于该项目来说显得过于累赘，所以尝试采用基于现有.NET API项目框架基础上的一种更简便快捷的小型后台前端框架。Vue.js就是一种很好的选择。

具体实现可参考Vue.js中文文档以及JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

Vue.js 入门

标签：接口   管理系统   依赖   理解   专注   dom   offic   分离   javascrip   

原文地址：https://www.cnblogs.com/ztpark/p/9200574.html