1. <body>
    2.     <!-- 第一步: 导入vue.js插件 -->
    3.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    5.     <!-- 第二步: 创建一个vue根标签, 只有在根标签内部可以使用vue模板语法 -->
    6.     <div id="myApp">
    7.         <h1>{{count}}</h1>
    8.         <button v-on:click="add">+</button> <br>
    9.         <input type="number" v-model.number="number1">
    10.         <input type="number" v-model.number="number2">
    11.         ={{number1 + number2}}
    12.     </div>
    14.     <!-- 第三步: 在script中创建vue对象, 配置vue信息 -->
    15.     <script>
    16.         var vm = new Vue({
    17.             el: "#myApp",  // 绑定vue语法渲染的根标签, 值是样式选择器 
    18.             data:{         // vue模板上渲染的动态数据
    19.                 count: 0,
    20.                 number1: 3,
    21.                 number2: 4
    22.             },
    23.             methods: {  // 自定义函数, 用于事件调用
    24.                 add(){
    25.                     // 在vue对象中,this默认指向当前vue对象
    26.                     console.log(this, this.$data.count, this.count)
    27.                     this.count++
    28.                 }
    29.             }
    30.         })
    31.         console.log(vm)
    32.         // vue对象创建时的字段调用前需要加$
    33.         console.log(vm.$el, vm.$data, vm.$data.count)
    34.         // vue中在调用data字段数据是, 可以省略$data
    35.         console.log(vm.number1)
    38.     </script>
    39. </body>