node后端中MVC与前端中的MVVM之间的区别

  • MVC是后端的分层开发概念
  • MVVM是前端视图层的概念，主要关注于视图层分离,也就是说:MVVM把前端的视图层,分为了三部分Model,View,VM ViewModel
  • 为什么有了MVC还要有MVVM

1.后端的MVC

MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M、V和VM。其中，VM是MVVM思想的核心；因为VM是M和V之间的调度者。

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

2.前端代码演示MVVM

<!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="../vuejs/vue.js"></script>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <div id="app">
        <p>{{msg}} </p>
    </div>
    <script>
        
        //2.创建一个Vue的实例
        //到我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
        var vm = new Vue({
            el:'#app',  //表示当前我们new的这个vue实例，要控制页面上的那个区域
            data:{  //data属性中，存放的是el中要用到的数据
                msg: '欢迎学习vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了[前端的Vue之类的框架,不提倡我们去手动操作DOM元素了]
            }
        })
        
    </script>
</body>
</html>

M (Model)

data就是MVVM中的M，专门用来保存 每个页面的数据

 data:{
                msg: '欢迎学习vue' 
            }

 

V (View)

Vue 实例所控制的这个元素区域,就是我们的V

<div id="app">
        <p>{{msg}} </p>
 </div>

VM  (ViewMode)

注意：我们 new 出来的这个vm对象，就是我们MVVM中的VM调度者.
   var vm = new Vue({
            el:'#app',  
            data:{  
                msg: '欢迎学习vue' 
            }
        })

 

posted @ 2019-10-31 14:25  林夕孟  阅读(452)  评论(0)  编辑  收藏  举报