一点睛

1 直接通过对象.的方式调用的属性，是来自于data或computed中的属性，但 vue 对象中的 el、data 等等这些键也称为属性，这些属性就是 Vue 对象的实例属性。

2 实例属性ref相对于id。在 vue 里面，往往使用 ref 属性来代替 id 属性的使用，这样可以快速的通过 ref 的值获得页面中的某个元素。

3 实例属性和普通属性的对比

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70

二代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 的实例对象</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- 挂载点 -->
<div>
    <div id="app1">
        <!-- 实例属性ref相对于id -->
        <button ref="mybtn1" id="btn1" @click="hanleClick1">点我</button>
        <button ref="mybtn2" id="btn2" @click="hanleClick2">点我</button>
    </div>
</div>
<script type="text/javascript">
    // Vue 的实例
    var v1 = new Vue({
        el: '#app1',
        methods: {
            hanleClick1: function () {
                this.$refs.mybtn1.innerHTML = '通过实例属性变脸'
            },
            hanleClick2: function () {
                this.$refs.mybtn2.innerHTML = '通过实例属性变脸'
            },
        }
    })
</script>
</body>
</html>