vue中dom操作

this.$el

当前组件最外层div

<template>
  <!-- <div class="hot-wrap" v-on:contextmenu.prevent = "create"> -->
  <div class="hot-wrap" @mousedown.self = "mousedownHandle">
    <hot ></hot>
    <form-panel ref="formPanel" @submit="change"></form-panel>
  </div>
</template>

...
mounted () {
    this.$nextTick(_ => {
      this.settingEl = this.$el  //<div class="hot-wrap">..</div>
      this.docEl = document
    })
  },
...

this.$refs

可以通过this.$refs获取持有注册过 ref 特性 的所有 DOM 元素和组件实例

（1）获取DOM元素

<div id="box" ref="box"></div>

let box = this.$refs.box // 等同于 let box = document.getElementById('box')

（2）获取组件组件实例

<child-component ref="child"></child-component>

this.$refs.child.fn() //fn为child-component组件实例中的方法
this.$refs.child.$el //获取child-component组件dom

this.$nextTick()

官方解释：将回调延迟到下次 DOM 更新循环之后执行。

一些需要等到dom渲染结束后才执行的操作（如获取元素宽，高），就用到this.$nextTick()

<div class="box" ref="box">
    <div v-for="(item,index) in list" :key="index" class="item">
      {{item}}
    </div>
  </div>
  <button @click="listChange">点我</button>

 data () {
    return {
      list: []
    }
  },
  methods: {
    listChange () {
      this.list = [1, 2, 3]
      // let H = this.$refs.box.offsetHeight
      // console.log(H) //0
      this.$nextTick(() =>{
        let H = this.$refs.box.offsetHeight
        console.log(H) //63
      })
    }
  }