Vue暴露一些属性和方法

Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀 $，以便与用户定义的属性区分开来。例如：

<script>
    const data = { a: 1 }
    const vm = new Vue({
      el: '#example',
      data: data
    })

    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true
    vm.$attrs   // 用户获取父组件传递给子组件的属性,(除props,class,style外)
    vm.$data    // vm 上的数据
    vm.$watch   // 监听
    vm.$el      // 当前el元素
    vm.$set     // 后加的属性实现响应式
    vm.$options // vm 配置 上的 所有属性
    vm.$nextTick(()=>{})   // 异步方法,等待渲染dom完成后来获取vm
    vm.$refs     // 获取dom元素或者组件实例的引用
</script>

Vue 操作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行操作,那么该如何处理呢,

操作DOM元素:

在需要操作的DOM元素中使用ref属性,
ref属性的值是自己随便定义的名字
通过Vue实例的$refs属性获取操作dom元素

<template>
    <div id="app">
        <div ref="wuwei">无为</div>
    </div>
</template>
<script>
    var vm = new Vue({   // 根实例
        el: '#app',
        data: {
        },
        mounted() {
           //dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个
            // 如果是循环出来的,可以获取多个,获取的是一个数组
            console.log(this.$refs.wuwei)
        }
    });
</script>

关于示例中$refs属性的解释: