Vue在更新到2.x版本后更改了很多的api，这对很多按着Vue1.x课程学习的同学来说比较麻烦，经常报出各种各样的错误。这次我们遇到的报错是:Failed to resolve directive: el

这是因为 v-el 在 Vue2.x 以后被淘汰。使用新的标签 ref 替换 v-el，下面是修改的方法。

修改前：

<div class="menu-wrapper" v-el:menu-wrapper>
    <ul>
        <li v-for="item in goods" class="menu-item">
            <span class="text border-1px">
                <icon v-show="item.type > 0" :speciesType="item.type" :type="3"></icon>{{item.name}}
            </span>
        </li>
    </ul>
</div>

修改后：

不仅 v-e l改成了 ref menuWrapper 不用中间再用 - 隔开

v-el: menu-wrapper → ref="menuWrapper"

<div class="menu-wrapper" ref="menuWrapper">
    <ul>
        <li v-for="item in goods" class="menu-item">
            <span class="text border-1px">
                <icon v-show="item.type > 0" :speciesType="item.type" :type="3"></icon>{{item.name}}
            </span>
        </li>
    </ul>
</div>

后面js的引用写法也发生了改变:

修改前:

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

修改后:

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

还可以移步官方手册：

API-ref
组件—子组件引用