理解Vue 2.0 的ref属性及简单用法

以一个菜单为例：

先搭建一个菜单列表example.vue:

<style src="./example.less" lang="less" scoped></style><template>    <div class="menu">        <div>            <div class="side-bar">            </div>            <ul class="catalog-list" >                <li class="level1" v-for="firstLevel in menuList">                    <em class="circle-pointer"></em>                    <a href="#" class="title-link">{{firstLevel.name}}</a>                    <ul v-if="firstLevel.children.length>0">                        <li class="level2" v-for="secondLevel in firstLevel.children">                            <em class="pointer"></em>                            <a href="#" class="title-link">{{secondLevel.name}}</a>                            <ul v-if="secondLevel.children.length>0">                                <li class="level3"                                    @click="moveArrow"                                    v-for="thirdLevel in secondLevel.children">                                    <a :href="'#item_'+thirdLevel.id" class="title-link">{{thirdLevel.name}}</a>                                </li>                            </ul>                        </li>                    </ul>                </li>                <li class="last"> <em class="circle-pointer"></em></li>                <a class="arrow" href="javascript:void(0);"></a>            </ul>        </div>    </div></template><script src="./example.js"></script>

加载数据menuList后效果如图：

为了让左边箭头随鼠标的点击移动，给三级目录绑定事件

获取当前鼠标点击的top以及外层div元素的top

为了访问到DOM元素的值，要用到ref属性，将以上的最外层Div改写为：

<div class="menu" ref="menuBorder">

就可以将class为menu的dom属性集合，即menuBorder挂载到this.refs上，通过this.refs.menuBorderj就可以访问了

example.js:

export default {    data() {        return {            menuList: [{                name: '一级目录',                children: [                    {                        name: '二级目录',                        children: [                            {                                name: '三级目录',                                children: ['内容']                            },                            {                                name: '二级目录',                                children: [{                                    name: '三级目录',                                    children: ['内容']                                }]                            },                            {                                name: '二级目录',                                children: [{                                    name: '三级目录',                                    children: ['内容']                                }]                            },                            {                                name: '二级目录',                                children: [{                                    name: '三级目录',                                    children: ['内容']                                }]                            },                            {                                name: '二级目录',                                children: [{                                    name: '三级目录',                                    children: ['内容']                                }]                            },                            {                                name: '二级目录',                                children: [{                                    name: '三级目录',                                    children: ['内容']                                }]                            }                        ]                    },{                        name: '二级目录',                        children: [                            {                                name: '三级目录',                                children: ['内容']                            },                            {                                name: '二级目录',                                children: [{                                    name: '三级目录',                                    children: ['内容']                                }]                            },                            {                                name: '二级目录',                                children: [{                                    name: '三级目录',                                    children: ['内容']                                }]                            },                            {                                name: '二级目录',                                children: [{                                    name: '三级目录',                                    children: ['内容']                                }]                            }                        ]                    }],            }]        };    },    methods:{        moveArrow:function (e) {            console.log($(e.target).offset().top)            let parentTop=this.$refs.menuBorder.offsetTop;            var top = $(e.target).offset().top - parentTop;            $('.arrow').css('top', top );        }    }};

less文件省略……

达到目的，是因为别人让用这个才试着使用，刚开始很模糊，不知道它的目的是什么，然后自己用完一遍后，发现就和选择器差不多效果……………………

自己实践了一下

console.log($('.menu').offset().top);console.log(this.$refs.menuBorder.offsetTop)

结果：

好吧，一样的………………
只能安慰自己多学习了一点知识
笑 脸