MVVM模式简单理解(基于vue)

最新推荐文章于 2024-09-02 09:53:33 发布

陈豆粒

最新推荐文章于 2024-09-02 09:53:33 发布

阅读量838

点赞数

分类专栏： Vue 文章标签： VUE

本文链接：https://blog.csdn.net/qq_28643817/article/details/86481671

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文深入解析MVVM(Model-View-ViewModel)架构，阐述其作为MVC改进版如何有效分离视图UI与业务逻辑，实现View与Model的双向数据绑定。通过实例演示Vue.js中MVVM的实现方式。

摘要由CSDN通过智能技术生成

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开.

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

M 保存的是每个页面单独的数据
VM 是一个调度者,分割M和V
V 每个页面中的HTML结构

实例:

   <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <!-- 引入vue.js -->
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <h1>{{msg}}</h1>
            </div>
        
        </body>
        <script>
            // 实例化vue对象
            let vm = new Vue({
                // 绑定对象
                el:'#app',
                data:{
                    msg:'hello vue.js'
                }
            })
        </script>
    </html>

V层
在这里插入图片描述
VM层

M层

以上,是个人浅显的理解,以后有新的想法会补充