分析 MVVM 模型

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

什么是 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。