vue中获取dom元素的方法 ref $refs的使用

      vue官方不建议我们直接操作dom.但真到项目实战中.有时候还是需要一些操作dom的功能.目前我在vue项目中最常用两种方式操作dom;下面简单说一些.

    第一种: 封装一个类似于jquery的函数.通过函数执行访问到dom元素.

    第二种: 使用vue提供的实例属性$refs获取到dom.

    先说下第一种: 

          封装函数如下:

Vue.prototype.jquery = function (id) {
    return document.getElementById(id);
};

这是一个全局的方法,在组件中通过this.jquery调用.接下来看看效果.

<template>
    <div>
        <p id="p">淘小说</p>
    </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      
    };
  },
 
  mounted() {
      console.log(this.jquery("p"))     //  <p data-v-56bb6bb9="" id="p">淘小说</p>    
  }
 
};
</script>

        此时就得到了这个dom元素.就可以操作这个dom.这里需要提醒的是函数内封装的是ID获取dom的方式.所以需要给dom加ID.如果不加ID还要获取.就需要改函数了.

 

  接下来说一下第二种.还是上面这个p元素.也很简单.我们只需要在p标签这么做:

<template>
    <div>
        <p ref="p">淘小说</p>
    </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      
    };
  },
 
  mounted() {
      console.log(this.$refs.p)     //  同样输出: <p data-v-56bb6bb9="" id="p">淘小说</p>    
  }
 
};
</script>

 同样得到了这个p元素.接下来就可以操作这个元素了.大家根据自己喜好选择吧.