标签：Vue 系列 vm server 课程 Model 数据 View
官方介绍
Vue是一套用于构建用户界面的渐进式框架，与其他的框架不同，vue的设计自底而上逐层应用。
渐进式
框架分层设计，每层都可选，不同的层都可以灵活的接入其他的方案更便捷的协作。 一个一个的放入，放入多少就做多少。
MV* 模式（MVC/MVVM）
MVC设计模式的引入
客户通过浏览器或者app等进行数据的操作，实现这个的有，处理发送请求，业务逻辑处理以及访问数据库，这三个功能我们是可以放到一块使用的，但是如果放在一起，代码便会很臃肿，不利于维护，于是便出现了代码分层思想，把代码按照功能分为三层，即模型层(Model)、显示层(View)、控制层(Controller)，这种代码的组织架构就叫MVC模式。
模型层(Model):
- Service层:负责一些业务处理，比如说：获取数据库连接，关闭数据库连接，事务回滚或者一些复杂的逻辑业务处理
- Dao层：负责访问数据库，对数据的操作，获取结果集
Controller层：主要功能是处理用户的请求
用户对View操作以后，View会把处理的权利交移给Controller；
Controller会对来自View数据进行预处理、决定调用哪个Model的接口；
然后由Model执行相关的业务逻辑（数据请求）；
当Model变更了以后，会通过观察者模式（Observer Pattern）通知View；
View通过观察者模式收到Model变更的消息以后，会向Model请求最新的数据，然后重新更新界面。
前后端的分手大师-MVVM
核心是 ViewModel 层，它就像是一个中转站，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，
该层向上与视图层进行双向数据绑定，
向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。
举个栗子：
view层
<div id="app">
<p>{{message}}</p>
<button v-on:click="showMessage()">Click me</button>
</div>
vm层
var app = new Vue({
el: '#app',
data: { // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
message: 'Hello Vue!', // 纯前端定义
server: {}, // 存放基于 Model 层数据的二次封装数据
},
methods: { // 用于描述视图行为（完全前端定义）
showMessage(){
let vm = this;
alert(vm.message);
}
},
created(){
let vm = this;
// Ajax 获取 Model 层的数据
ajax({
url: '/your/server/data/api',
success(res){
// TODO 对获取到的 Model 数据进行转换处理，做二次封装
vm.server = res;
}
});
}
})
服务端的 Model 层（省略业务逻辑处理，只描述对外接口）：
{
"url": "/your/server/data/api",
"res": {
"success": true,
"name": "IoveC",
"domain": "www.cnblogs.com"
}
}
View的心跳体验
- 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
命令行工具vue cli
- Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。
npm install -g @vue/cli
真相只有一个-数据绑定原理
标签：Vue,系列,vm,server,课程,Model,数据,View 来源： https://www.cnblogs.com/xiaorain124/p/14118853.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。