您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

分析 MVVM 模型

时间:12-11来源:作者:点击数:

什么是 MVVM 模型

MVVM 是 Model-View-ViewModel 的缩写,它是一种软件架构风格
Model:模型, 数据对象(data选项当中的)
View:视图,模板页面(用于渲染数据,将数据渲染到页面上)
ViewModel:视图模型,其实本质上就是我们new的 Vue 实例,我们可以使用const vm取接收

它的哲学思想是:

1 通过数据驱动视图
2 把需要改变视图的数据初始化到 Vue中,然后再通过修改 Vue 中的数据,从而实现对视图的更新。
3 声明式编程
  按照 Vue 的特定语法进行声明开发,就可以实现对应功能,不需要我们直接操作Dom元素(命令式编程:Jquery它就是,需要手动去操作Dom才能实现对应功能。)
在这里插入图片描述

接下来我们通过一个演示图来分析:

在这里插入图片描述

代码:

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

<div id="app">
    <input type="text" v-model="msg">
    <p>Hello {{msg}}</p>
</div>
<!--引入js文件-->
<script src="../js/vue.js"></script>
<script>
    // 创建vue实例
    const vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        }
    })
</script>
</body>
</html>
在这里插入图片描述
View层(视图层):
  在我们前端开发中,通常就是DOM层。主要的作用是给用户展示各种信息。
Model层(数据层):
  数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
VueModel层(视图模型层):
  视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中,
  另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门