05理解MVVM

<template>
    <div>
      <h1>理解MVVM</h1>
    </div>
    <div id="root">
      <h5>我的名字： {{ name }}</h5>
      <h5>我的年龄： {{ age }}</h5>
      <h5>测试一下 {{ 1 + 1}}</h5>
      <h5>测试一下 {{ $options}}</h5>
    </div>
    
    <hr/>
  MVVM模型<br/>
      1. M: 模型(Model) : data中的数据<br/>
      2. V: 视图(View) : 模板代码<br/>
      3. VM: 视图模型(ViewModel) : Vue实例vm<br/>
  观察发现:<br/>
      1.data中所有的属性,最后都出现在了vm身上<br/>
      2.vm身上所有的属性 及 Vue原型上所有的属性, 在Vue模板中都可以直接使用<br/>
  
    
    
  </template>
  <script>
  
  export default {
  //data的第二种写法:函数式
    data() { 
      console.log('@@@',this);
      return { 
        name: 'qinling',
        age: 25,
        
        
      }
    }
    
  }
  </script>