Vue暴露的属性和方法

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元素:

1. 在需要操作的DOM元素中使用ref属性,
2. ref属性的值是自己随便定义的名字
3. 通过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属性的解释:

1. 因为可以在多个DOM元素上使用ref.
2. 所以$refs属性获取的是所有具有ref属性的DOM元素的集.
3. 因此要想操作确定的DOM元素就需要在通过当初的ref值获取.

简而言之: 就是ref在dom元素上通过 this.$refs.自定义名字 是获取dom元素

当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行操作

注意:Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined