Vue学习(一): Vue的MVVM

1.Node(后端)中的MVC与前端中的MVVM之间的区别

  • MVC是后端分层开发概念。
  • MVVM是前端视图层的概念,主要关注于视图分层,也就是说:MVVM把前端的分为了三部分,Model, VM 和 ViewModel

2.Vue处理逻辑过程

3.Vue基本代码和MVVM之间对应关系

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
    <script src="./vue.js"></script>
</head>
<body>
<!--将来 new这个Vue实例控制这个元素所有内容 
    Vue实例所控制的这个元素区域,就是我们的 V -->
<div id="app">
    <p>{{ msg }}</p>

</div>
<script>
//创建实例
//当我们导入包之后,在浏览器内存中,就多了一个Vue构造函数
//我们New出来的这个vm对象,就是我们MVVM中的VM调度者
 var vm = new Vue({
     el: '#app', //表示当前我们New这个Vue实例,要控制页面哪个区域
     data:{
         //data 属性中,存放的是el中需要的数据
         msg: 'Vue学习' //通过Vue提供的指令,很方便把数据渲染到页面上,程序员不在手动操作DOM元素[前端框架Vue之类的框架,不提倡我们手动操作DOM 元素]
     }
     //这里的data就是MVVM的M,专门保存每个页面的数据的
})
</script>
</body>
</html>