MVVM是在前端中的模式，即Model（模型，数据），View（视图层）和这两者之间的VM（调度者）
<!DOCTYPE html> <html lang="en"> <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>Document</title> <!-- 1.导入vue的包 --> <script src="./lib/vue.js"></script> </head> <body> <!-- 将来new的vue实例会控制这个元素中的所有内容 --> <div id="app"> <p>{{msg}}</p> </div> <script> //2.创建一个vue的实例 //当我们导入包时，在浏览器的内存中，就多了一个vue的构造函数 var vm=new Vue({ el:'#app',//表示当我们new的这个vue实例，要控制页面上的哪个区域 data:{//data属性中，存放的是el中要用到的数据 msg:'欢迎使用vue'//通过vue指令，就能很方便的把数据渲染到页面上 } }) </script> </body> </html>
这其中，view就是
<div id="app"> <p>{{msg}}</p> </div>
model就是
data:{//data属性中，存放的是el中要用到的数据
msg:'欢迎使用vue'//通过vue指令，就能很方便的把数据渲染到页面上
}
vm就是
<script> //2.创建一个vue的实例 //当我们导入包时，在浏览器的内存中，就多了一个vue的构造函数 var vm=new Vue({ el:'#app',//表示当我们new的这个vue实例，要控制页面上的哪个区域 data:{//data属性中，存放的是el中要用到的数据 msg:'欢迎使用vue'//通过vue指令，就能很方便的把数据渲染到页面上 } }) </script>
也就是说，vm的作用就是将数据和视图连接到一块