初识MVVM模式

最新推荐文章于 2024-06-01 15:46:07 发布

灰灰的996

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量52

点赞数

文章标签： vue vue.js javascript

本文链接：https://blog.csdn.net/m0_73379880/article/details/132757773

版权

什么是MVVM模式

MVVM是前端目前非常流行一种架构模式

目前大部部分的前端框架都使用了这个思想。

MVVM可以用来干什么

M(Model)数据/模型

V(view)视图

VM（viewModel） VM是MVVM的核心部分,vm可以监听组件的变化，当组件的value发生变化的时候可以将数据传递回到我们的data中，而vm中的databings 可以将我们model里边的data挂载到制定组件的value上边。这样就达到了 model<=>view的双向数据动态绑定。

这种架构模式将nodel与view进行了解耦，大大的降低了程序的代码数量，之前都是需要我们写大量的操作dom树的就是代码来实现数据的双向绑定；

MVVM代码描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js">

    </script>
</head>
<body>
  

     <!-- 整个框架分为mvvm -->
     <!-- view 视图 V -->
     <div id="app">
        姓名:<input type="text" v-model="zhangsan"/>
     </div>
     <script>
        /*  VM  viewmodel  */
        new Vue({
            el:'#app',
            /*  MODEL 模型/数据 M*/
            data:{
                name:'zhangsan'
            }
        })
     </script>
</body>
</html>

我们只需要通过vue框架的v-model指令就可以实现model与view之间的双向绑定。