1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         <button ref="myBtn">{{name}}{{count1}}{{count2}}</button>
    5.     </div>
    6.     <script>
    7.         new Vue({
    8.             el: '#myApp',
    9.             data: {
    10.                 name: '张三',
    11.                 // count1: 0,
    12.                 // count2: 2
    13.             },
    14.             methods: {
    15.                 add(){
    16.                     console.log(++this.name)
    17.                 }
    18.             },
    19.             created() {
    20.                 // 如果是和dom相关的操作,不要在created执行, 因为此时视图还没渲染
    21.                 this.count1 = 100 // 渲染前打点定义的变量可以被渲染出来
    22.                 // 一个字段不在data中定义,直接调用赋值, 一般用作全局变量
    23.             },
    24.             mounted() {
    25.                 // console.log(this.count)
    26.                 this.count2 = 200; // 渲染后打点定义的变量显示不出来
    27.                 // dom相关操作一定要在视图渲染之后mounted中执行
    29.                 // 1, 使用原生dom操作查找元素绑定事件
    30.                 var btn = document.getElementsByTagName("button")[0]
    31.                 btn.onclick = this.add
    33.                 // 2, 使用vue中的ref属性查找, 给dom元素添加ref属性,然后通过this.$refs查找
    34.                 console.log(this.$refs)
    35.                 this.$refs.myBtn.onclick = this.add
    36.             }
    37.         })
    38.     </script>
    39. </body>