前言:

其实在没有学习前端框架之前使用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误区

Logo

前往低代码交流专区

更多推荐