vue中如何操作真实dom

原生操作dom
a = document.getElementById('elea');//  获取a
elementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的li
element = document.querySelector(selectors)//获取dom元素中的第一个元素
1
2
3
还有很多这样的dom操作方法。

Vue中一般不操作dom,如果想要获取dom元素，该如何操作？

Vue中操作dom
Vue 1.x中
使用v-el 与this.$els来获取元素：

  <div class='box'  v-el: myBox>你好</div>

  显示为红色：this.$els.my-box.style.color = 'red'
1
2
3
Vue 2.x中
使用 ref与this.$refs.xxx来获取dom元素。

<div class='box' ref='myBox'>你好</div>

显示为红色：this.$refs.myBox.style.color = 'red

注意： Vue 2.x将v-el与v-ref合并为ref。

补充：

ref属性可以使用在普通标签中，也可以使用在组件中，在父组件的模板中，子组件的标签上使用ref指定一个名称(name)，并在父组件中通过this.$refs.xxx(name)来访问这个子组件中的数据。

<div id="app">
    <p ref="myP"></p>
    <child-components ref="child"></child-components>
</div>

应用场景：
this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。
created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

简单的理解，vue.js中this.$nextTick()就是起到了一个等待数据的作用，也就是说，将一些回调延迟，等到DOM更新之后再开始执行。简单点说，相当于setTimeout()的作用。