vue操作DOM

一、使用方法

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

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