1. M: 模型(Model) : 对应Vue对象中的data数据对象
    2. V: 视图(View): 模板，就是要展示的页面，由各种标签组成，例如：<div></div>
    3. VM: 视图模型(ViewModel) : Vue实例对象

    ViewModel的作用就是将data数据和DOM进行绑定，然后展示在页面中，ViewModel就是Vue实例对象，一般vm就代表ViewModel
    3-MVVM 模型 - 图1

    • data对象上所有的属性在vue对象中都能看到
    • Vue身上所有的属性及 Vue原型身上所有的属性，在Vue模板中都可以直接使用

    image.png
    测试演示：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>第一个Vue</title>
    6.     <script type="text/javascript" src="../vuejs/vue.js"></script>
    7. </head>
    8. <body>
    9.     <div id="root">
    10.         <h1>您好，{{name}}</h1>
    11.         <h1>vue的属性：{{$options}}</h1>
    12.         <h1>vue的原型里的内容：{{$emit}}</h1>
    13.     </div>
    14.     <script type="text/javascript">
    15.         Vue.config.productionTip = false
    16.         const vm = new Vue({
    17.             el:'#root',
    18.             data:{
    19.                 name:'Jack'
    20.             }
    21.         });
    22.         console.log(vm)
    23.     </script>
    24. </body>
    25. </html>

    演示效果：
    image.png