7.Vue 操作dom

Vue操作dom：

在Vue中获取dom，需要在dom上使用ref="名称"，然后通过：this.$refs.名称 进行操作：

1.在本页面获取dom

2.获取子组件对象

案例：

index.vue：

<template>
  <div>
      <div ref="divInfo"> {{text}}</div>
      <br/><br/>
      下面是子组件内容：
        <sub-vue ref="subInfo"></sub-vue>
  </div>
</template>
<script>
  // 导入子组件：
  import subComponent from './subComponent';
  export default {
      data(){
          return  {
            text: '本页面值'
          }
      },
      // 导入组件
      components: {
          subVue: subComponent
      },
     // created （vue自动回掉）数据完成初始化，但是获取不到dom  
     created(){
        console.log('create:', this.text);
        //
        console.log('create 获取dom：', this.$refs.divInfo);// undefined
      },
      // mounted （vue自动回掉）dom出生完成，可以获取不到dom  操作dom
      mounted(){
          console.log('mounted:', this.text);
          //获取当前页面dom
          console.log('mounted 获取dom：', this.$refs.divInfo.innerHTML = 'mounted中改变');
          //获取子组件中对象
          console.log('mounted 获取子组件dom：', this.$refs.subInfo.$el.innerHTML= 'mounted中改变');
          //操作子组件数据
          //alert(this.$refs.subInfo.text);
      }
  }
</script>
<style>
</style>

subComponent.vue：

<template>
  <div>
        这是子组件：{{text}}
  </div>
</template>
<script>
  export default {
    data(){
      return {
        text: '子组件内容'
      }
    }  
  }
</script>
<style></style>