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