Vuejs学习笔记(一)-3.vue中的MVVM

 

 

上图就是vue的MVVM设计架构。View-ViewModel-Model

对于简单的vue代码，是按照一下方式分层。

View层表示展示层，渲染DOM后给最终客户看到的层，即界面和界面数据。

ViewModel层叫做视图适配器。即数据属性与View元素之间的双向绑定关系

Model层数据层。

所以最关键的位置在于ViewModel层，做了页面元素的监听（Dom listeners）和数据双向绑定（Data bindings）操作。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>03-计数器</title>
 6   <style>
 7       div {
 8           color: #313131;
 9       }
10   </style>
11 </head>
12 <body>
13 
14 <!--监听事件 v-on:click -->
15 <!--语法糖@click  就等于 v-on:click-->
16 <!--div 属于view层-->
17 <div id="app1">
18   <h2>当前计数:{{ counter }}</h2>
19   <!--    <button v-on:click="counter++">+</button>-->
20   <!--    <button v-on:click="counter&#45;&#45;">-</button>-->
21 
22   <button v-on:click="add">+</button>
23   <button @click="sub">-</button>
24 </div>
25 <script src="../js/vue.js"></script>
26 <script>
27 
28   <!--
29   script下的obj属于model层-->
30   const obj = {
31     counter: 0
32   }
33   <!--script下的new Vue()属于viewModel层，数据绑定关系-->
34   const app = new Vue({
35     el: '#app1',
36     data: obj,
37     methods: {
38       add: function () {
39         console.log('执行add');
40         this.counter++;
41       },
42       sub: function () {
43         console.log('执行sub');
44         this.counter--;
45       }
46     },
47 58   })
59 
60 
61 </script>
62 </body>
63 </html>

 

 由以上这个概念即可，后续再深入研究

posted @ 2021-06-30 17:45  kaer_invoker  阅读(74)  评论(0)  编辑  收藏  举报