3/14 Vue中如何操作dom？

前面的话

前端日问，与小柒一起打卡学习，每天进步一点点！

原生操作dom

a = document.getElementById('elea');//  获取a
elementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的li
element = document.querySelector(selectors)//获取dom元素中的第一个元素

还有很多这样的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'
  

• 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>