VUE——MVC、MVVM的关系图解 & vue基本代码

最新推荐文章于 2023-12-13 20:30:53 发布

原创最新推荐文章于 2023-12-13 20:30:53 发布 · 571 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了前端开发中的MVVM架构，强调VM作为数据和视图的调度者的重要作用，以及数据双向绑定的概念。文章还提到了在Vue应用中，app.js作为入口模块，router.js负责路由分发，而业务逻辑处理和数据CRUD则分别在controller和Model层进行。

MVVM是前端视图层的分层开发思想，主要把每个页面分成了M、V和VM。其中，VM是MVVM思想的核心；因为VM是M和V之间的调度者。
M：保存的是每个页面中单独的数据。
VM：是一个调度者，分隔了M和V。每个V层想要获取和保存数据的时候，都要由VM做中间的处理。
V：就是每个页面中的HTML结构

前端页面中使用MVVM的思想，主要是为了让我们开发更加方便，因为MVVM提供了数据的双向绑定；
注意：数据的双向绑定是由VM提供的。

app.js
项目的入口模块，一切请求都要先进入这里进行处理。
注意：app.js并没有路由分发功能，需要调用
router.js模块进行路由分发处理

router.js
路由分发处理模块。
【为了保证路由模块职能单一，router.js只负责分发路由，不负责具体业务逻辑的处理】
如果涉及到业务逻辑处理的操作：router.js无能为力，只能调用controller模块进行业务逻辑处理。

controller
业务逻辑处理层
在这个模块中，封装了一些具体业务逻辑处理的逻辑代码，但也是为了保证职能单一，此模块只负责处理业务，不负责处理数据的CRUD，如涉及到数据的CRUD，需调用Model层。

Model层
职能单一，只负责操作数据库，执行对应的SQL语句，进行数据的CRUD
C：create
R：Read
U：Update
D：Delete

View视图层请求
每当用户操作了界面，如果需要进行业务的处理，都会通过网络请求，去请求后端的服务器，此时我们这个请求，就会被后端的App.js监听到。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>

</html>