微信扫一扫打赏支持

VUE课程---4、MVVM原理

VUE课程---4、MVVM原理

一、总结

一句话总结：

第一个m是Model，数据模型，就是用来获取数据的
第二个v是View，也就是视图，数据肯定是要在视图里面展示的
第三个vm是ViewModel，也就是视图模型，也就是vue实例的部分，也就是做dom监听和数据绑定

 

1、mvvm中的vm层的意义？

a、【实现view层和model层的解耦】：vm层分割了m（model）层和v（view）层，每当view层需要获取或者保存数据的时候，都需要vm做中间的处理
b、【数据的双向绑定】：vm层（ViewModel）（vue实例）帮我们做了数据的双向绑定（具体dom监听和数据绑定），可以节约我们的很多代码

 

 

二、MVVM原理

博客对应课程的视频位置：4、MVVM原理
https://www.fanrenyi.com/video/26/221

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>MVVM原理</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 后端的MVC
11 m（model）：从数据库里面拿数据并且处理数据
12 v（view）：视图
13 c（controller）：进行业务逻辑的控制
14 
15 
16 vue的mvvm原理？
17 第一个m是Model，数据模型，就是用来获取数据的
18 第二个v是View，也就是视图，数据肯定是要在视图里面展示的
19 第三个vm是ViewModel，也就是视图模型，也就是vue实例的部分，
20 也就是做dom监听和数据绑定
21 
22 
23 
24 mvvm中的vm层的意义？
25 a、【实现view层和model层的解耦】：vm层分割了m（model）层和v（view）层，
26 每当view层需要获取或者保存数据的时候，
27 都需要vm做中间的处理
28 b、【数据的双向绑定】：vm层（ViewModel）（vue实例）帮我们做了数据的双向绑定（具体dom监听和数据绑定），
29 可以帮我们节约很多代码
30 
31 -->
32 <div id="app">
33     <input type="text" v-model="msg2">
34     <div>{{msg2}}</div>
35 </div>
36 <script src="../js/vue.js"></script>
37 <script>
38     let vm=new Vue({
39         el:'#app',
40         data:{
41             msg:'欢迎来到vue的世界1111111111111',
42             msg2:'这是vue的双向数据绑定的实例'
43         }
44     });
45 </script>
46 </body>
47 </html>

 

 

 

vue的mvvm原理图

 

 
posted @ 2020-05-07 12:24  范仁义  阅读(338)  评论(0)  编辑  收藏  举报