1. MVVM模型

MVVM模型是Vue的核心，也是Vue的核心思想

  • M：模型 Model，data中的数据
  • V：视图 View，模板代码
  • VM：视图模型 ViewModel，Vue实例

观察发现

  • data中所有的属性，最后都出现在了vm身上
  • vm身上所有的属性 及Vue原型身上所有的属性，在 Vue模板中都可以直接使用

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>理解MVVM</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>学校名称：{{name}}</h1>
   <h1>学校地址：{{address}}</h1>
   <!-- <h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1>
			<h1>测试一下3：{{$emit}}</h1>
			<h1>测试一下4：{{_c}}</h1> -->
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    name:'北京大学',
    address:'北京',
   }
  })
  console.log(vm)
 </script>
</html>