(三)通过Vue实例理解MVVM原理

三、Vue中的MVVM(Model-View-View-Model)

1.为什么会有MVVM?

现在,随着前端页面越来越复杂,用户对于交互性要求也越来越高,MVVM模型应运而生。

MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。

2.ViewModel如何编写?

需要用JavaScript编写一个通用的ViewModel,这样,就可以复用整个MVVM模型了。

以第二章的第三个案例为例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$title>
head>
<body>

<div id="app">
    <h2>当前计数:{{counter}}h2>


    <button v-on:click="add">+button>
    <button v-on:click="sub">-button>
div>

<script src="js/vue.js">script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            add:function (){
                console.log('add被执行');
                this.counter++
            },
            sub:function (){
                console.log('sub被执行');
                this.counter--
            }
        }
    })
script>

body>
html>

运行结果
在这里插入图片描述
上面这个例子,可以用下面这个图来解释MVVM:
(三)通过Vue实例理解MVVM原理_第1张图片

(三)通过Vue实例理解MVVM原理_第2张图片
view和model之间的通信需要通过ViewModel来完成。

  • view层:视图层,在前端开发中,通常就是DOM,作用是给用户展示各种信息。
  • model层:数据层,数据可以是我们固定死的数据,也可以是网络上的数据。
  • ViewModel层:视图模型层,是桥梁。具体作用如下
    Data Binding:数据绑定,把model中data里面的数据绑定到view里面,ViewModel会对数据进行解析后更新到view里面。
    DOM listeners:DOM事件监听,当view页面上发生一些操作事件(点击、touch等)的时候,ViewModel就会把这些事件回调到model里面,做更多相关操作(比如改变对应Data的值)。

你可能感兴趣的:(#,Vue.js保姆级教程)