后端mvc架构和前端mvvm架构图解，及vue框架的对应

一时失言乱红尘 2022-02-21 08:13 346阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4xMDQyMjQ2NjEy_size_16_color_FFFFFF_t_70][]

> <!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>  
>     
>   <script src="./lib/vue-2.4.0.js"></script>  
> </head>
> 
> <body>  
>     
>     
>   <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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4xMDQyMjQ2NjEy_size_16_color_FFFFFF_t_70]: /images/20220221/5872eecebb7f461e900fd74f2ba3a8ed.png