vue.js入门（五）——如何操作底层DOM

前言：

其实在没有学习前端框架之前使用dom操作非常的普遍，但是前端框架的一个好处就是避免使用dom底层操作，安全并且高效，但是有时候我们又不可避免的使用它，所以vue给dom操作留了一个后门，让我们在不得以的情况下使用它完成我们的功能！

内容：

在指定元素上，添加ref=“名称A”；
在获取的地方加入this.$refs.名称A:
  1. 如果ref放在了原生dom元素上，获取的诗句就是原生的dom对象
  2. 如果ref放在组件对象，获取的就是组件对象。

实例：
app.vue template:

<template>
   <div>
     请输入内容
     <input type="text" name="" v-model="text">
     显示：{{text | myFilter }}
      <!--子组件-->
     <hello-world ref="sub"></hello-world>
     <!--原生dom对象-->
     <div ref="myDiv">heiehi</div> 
   </div>
</template>

app.vue script:

<script>
import HelloWorld from './components/HelloWorld.vue'; //引入子组件helloworld
export default {
   components:{
       helloWorld:HelloWorld
   },
   //该函数创建了组件，数据已经完成初始化，但是dom还未生成
   create(){
       console.log('created:', this.$refs.myDiv);
   },
   //数据装载到了dom上面，各种数据已经就位，将数据渲染到dom上，dom生成：mounted英文意思：装载，表示数据已经装载到dom上
   mounted(){
      console.log('mounted:', this.$refs.myDiv); //获取原生对象的dom
      console.log(this.$refs.sub.$el);  //获取组件对象的dom
      this.$refs.myDiv.innerHTML="nihao"; //改变原生对象的dom元素值
      this.$refs.sub.$el.innerHTML="我改变了子类"; //如果组件对象中只有一个div元素，这个操作是可以。
      this.$refs.sub.$el.children[0].innerHtml="我改变了子类";//存在了多个div元素，通过这种方式获取，即使组件对象元素中使用ref，父组件没有办法获取到从而指定一个子组件的元素值，只能通过dom操作方式。
   }
}
</script>

总结：
从操作dom的角度来看，angular封装了renderer等对象来实现底层dom元素操作，vue通过这种this.$refs.名称的方式，更加的简单易学。如果你想看angular4如何操作dom，请参考下面这篇博客：
Angular2进阶(一)——如何避免Dom误区