复习vue1:Vue的基本使用以及MVVM的介绍
下面，先来看一段最简单的代码，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue基本使用</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el: "#app",
data() {
return {
msg: "hello world",
};
},
});
setTimeout(() => {
app.msg = "hello Vue";
}, 1000);
</script>
</body>
</html>
在上面的代码中，创建了Vue的实例，并指定了数据，最终数据展示在id为app的这个div中，并且在停顿了一秒钟以后，通过Vue的实例来修改对应的msg数据。
通过上面的代码,我们能够看到Vue的核心理念是数据驱动的理念，所谓的数据驱动理念：当数据发生变化的时候，用户页面也会发生相应的变化，开发者并不需要手动去修改dom
简单的理解：就是通过Vue.js帮我们封装了数据和dom对象操作的映射，我们只需要关心数据的逻辑处理，数据的变化就能够自然的通知页面进行页面的重新渲染。
这样带给我们的好处就是，我们不需要在代码中频繁的操作dom了，这样提高了开发的销量，同时也避免了在操作dom的时候出现错误。
Vue.js的数据驱动是通过MVVM这种框架来实现的，MVVM框架注意包括三部分：Model,View,viewModel,
Model:指的是数据部分，对应到前端就是JavaScript对象
View:指的是视图部分
viewModel就是连接视图与数据的中间件（中间桥梁）
以上三部分对应到代码中的位置如下图所示：
下面我们再看一张图来理解一下MVVM框架的作用：
数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据(Model)变化的时候，ViewModel能够监听到这种变化，并及时通知View视图做出修改。同样的，当页面有事件触发的时候，ViewModel也能够监听到事件，并通知数据(Model)进行响应。所以ViewModel就相当于一个观察者，监控着对方的动作，并通知对方进行相应的操作。
简单的理解就是：MVVM实现了将业务(数据)与视图进行分离的功能
这里还需要注意的一点就是:
MVVM框架的三要素：响应式，模板引擎，渲染
响应式：Vue的如何监听数据的变化？
模板：Vue的模板如何编写和解析？怎样将据图的值替换掉{{msg}}内容，这就是模板引擎的解析。
渲染：Vue如何将模板转换成Html？其实就是有虚拟DOM向真实DOM的转换。
在后面，我还会深入探讨这块内容，包括模拟实现一个数据驱动的框架。
3193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
