vue.js2.0版本—学习better-scroll

页面与js结合

模板

<div class="menu-wrapper" v-el="menu-wrapper">
      <ul class="menu">
        <li v-for="item in goods" class="menu-item">
          <span class="text">
            <span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>

js

this.menuScroll = new BScroll(this.$els.menuWrapper, {})

在vue 2.0版本会报错

Failed to resolve directive: el

为什么会报这个错呢，主要还是因为vue升级的时候，v-el在vue2.x以后被淘汰。使用新的标签ref替换v-el，接下来告诉大家怎么使用。

解决方案

<div class="menu-wrapper" ref="menuWrapper">
      <ul class="menu">
        <li v-for="item in goods" class="menu-item">
          <span class="text">
            <span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>

js

this.menuScroll = new BScroll(this.$refs.menuWrapper, {})