（七）在Vue中获取DOM对象

在Vue中我们也可以获取DOM对象

利用特殊特性ref和实例属性vm.$refs实现在Vue中获取到特定的DOM对象

1）首先在子组件的<template>中某个元素节点上声明ref特性，如下面是在goods.vue文件中的<template>中的定义：ref="menuWrapper"

 <div class="menu-wrapper" ref="menuWrapper">
</div>

2）然后再goods.vue中的<script>标签里面输出语句里面的methods属性中定义一个方法，在该方法里面去引用上面的DOM节点：this.$refs.menuWrapper

<script>
  import BScroll from 'better-scroll'; //引进这个实现上下滑动的插件
  export default {

      data(){
        return {
          goods:[]
        }
      },
      created(){//在这个时刻向后台请求数据
        this.$http.get('/api/goods').then((res) => {
          res = res.body;
          if( res.errno === ERR_OK ){
            this.goods = res.data;
            this.$nextTick(() => {
              this._initScroll();
            });
          }
        });
       
      },
      methods:{
        _initScroll(){
          //初始化需要滚动的对象

          this.menuScroll = new BScroll(this.$refs.menuWrapper,{
            click:true
          });

        }
      }
  }
</script>