浅谈mvvm

最新推荐文章于 2024-02-15 10:15:11 发布

Jevons__Lee

最新推荐文章于 2024-02-15 10:15:11 发布

阅读量384

点赞数 2

分类专栏： vue 文章标签： mvvm 数据 vue

本文链接：https://blog.csdn.net/lizhiwenY/article/details/79884247

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、MVVM图例

说到MVVM，先来看看下面下面这张图

这张图足以说明MVVM的核心功能，在这三者里面，ViewModel无疑起着重要的桥梁作用。

一方面，通过ViewModel将Model的数据绑定到View的Dom元素上面，当Model里面的数据发生变化的时候，通过ViewModel里面数据绑定的机制，触发View里面Dom元素的变化；
另一方面，又通过ViewModel来监听View里面的Dom元素的数据变化，当页面上面的Dom元素发生变化的时候，ViewModel通过Dom树的监听机制，触发对应的Model的数据变化。

当然在Vue.js里面ViewModel也是核心部件，它就是一个Vue实例。这个实例作用于单个或者多个html元素，从而实现Dom树监听和数据绑定的双向更新操作。

2.vue实例

<body>
    <div id="app">
        <h1>姓名：{{ Name }}</h1>
        <h1>年龄：{{ Age }}</h1>
        <h1>学校：{{ School }}</h1>
    </div>

    <script src="Content/vue/dist/vue.js"></script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: 18,
        School:'光明小学',
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
   
    </script>
</body>

这段代码不难理解，我们的Model就是data变量，而ViewModel就是这里的new Vue()得到的对象。这里两个最简单的属性相信大家一看就能明白。

el：表示绑定的Dom元素，此例子中表示的是父级的Dom元素。
data：需要绑定的数据Model。
值得一提的是 {{ Name }} 这种写法仅仅只能实现单向绑定，只有在Model里面数据发生变化的时候会触发界面Dom元素的变化，反之并不能触发Model数据的变化。可以通过浏览器的Console来验证这一理论。
那么，对于双向绑定的机制，Vue是如何实现的呢？
vue里面提供了v-model指令，为我们方便实现Model和View的双向绑定，使用也非常简单。还是上文的例子，我们加入一个文本框，里面使用v-model指令。

<body>
    <div id="app">
        <h1>编辑姓名：<input type="text" v-model="Name" /></h1>
        <h1>姓名：{{ Name }}</h1>
        <h1>年龄：{{ Age }}</h1>
        <h1>学校：{{ School }}</h1>
    </div>

    <script src="Content/vue/dist/vue.js"></script>
    <script type="text/javascript">
    //Model
    var data = {
        Name: '小明',
        Age: 18,
        School:'光明小学',
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
    });
    </script>
</body>

通过v-model指令，很方便的实现了Model和View之间的双向绑定。单从这种绑定的方式来看，还是比Knockout要简单一点，至少不用区分什么普通属性和监控属性。