如何实现vue_tree结构

作者：youshiki
时间：2017-07-11 17:44:10 星期二

前言

今年开始学习python+web框架（vue）来完成一套自动化测试工具的搭建，文章用来记录这个过程中学习的点点滴滴，主要通过知识点的整理方便自己后续查阅和后续课程准备。

什么是vue

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
那么为什么会使用vue来做自动化工具系统的web框架？

• 起步简单，上手容易
• vue实现数据双向绑定
• 与公司web部技术一直平【方便提供技术支持】

vue_tree实现

1、vue_tree 构成部分

vue_tree.js
主要是提供：

• 菜单的数据
• 菜单组件方法
• vue实例

index.html
主要是网页显示：

• 菜单树结构的展示script
• 主页面的布局
• glyphicon图标的引用
• iframe的使用

2、讲讲里面主要点

vue.js

树的数据结构，即使菜单目录
加载树形结构初始化数据，可以用ajax获取

var robotdata= {
        id:'1',
        name:'机器人工具',
        children:[
            {name:'M10项目组'},
            {name:'M16项目组'},
            {name:'M18项目组'},
            {name:'M20项目组'},
            {name:'sssss'}
         ]
    };

var configdata= {
        id:'2',
        name:'配置检查工具',
        children:[
            {name:'svn配置常规脚本'},
            {name:'项目定制脚本',
            children:[
                {name:'M10项目'},
                {name:'M16项目'},
                {name:'M18项目'},
                {name:'M20项目'}
            ]}]
    };

var mgdata={
    id:'3',
    name:'手游监控器',
    children:[]
};

var libarydata={
    id:'4',
    name:'脚本库',
    children:[]
};

因为vue会实现数据的双向绑定，所有通过修改对应目录下的菜单就可以在web上进行更新显示
可以通过对应的数据结构格式进行增删改除

注册vue的组件，用于与html的数据互通的调用
主要是定义激活树结构函数与读取树结构的函数，方便在html中引用、

Vue.component('item',{//获取全局组件（可用于注册组件）
    template:'#item-template',
    props:{
        model:Object//定义model数据格式
    },
    data:function () {
        return{
            open:false//vue对样式进行改变操作，TRUE显示，false不显示
        }
    },
    computed:{//读取写入函数，不写get，set则为读
        isFolder:function () {
            return this.model.children
        }

    },
    methods:{
        toggle:function () {
            if (this.isFolder){
                this.open=!this.open//打开树形结构
            }
        }
    }

});

实例化vue，这里会在对应的item中引用对应的model

var TestTree=new Vue({//创建一个vue实例，绑定树形数据
   el:"#MenuTree",
   data:{
       RobotData:robotdata,
       ConfigData:configdata,
       MgData:mgdata,
       LibaryData:libarydata
}});

index.html

菜单如何显示与父类菜单与子类菜单关系，位置的显示等关系
实际上我们也可以将上面的component和script放在一个组件.vue文件中，通过调用来实现我们要的数据绑定

    <script type="text/x-template" id="item-template">
            <li>
                <div :class="{bold: isFolder}" @click="toggle" >
                    <i v-if="isFolder" :class="[open ?'glyphicon glyphicon-chevron-down fa fa-file blue':'glyphicon glyphicon-chevron-right fa fa-file blue']"></i>
                    <i v-if="!isFolder" class=" glyphicon glyphicon-bookmark fa fa-file blue " style="padding-left:20px"></i>
                    {{model.name}}
                </div>
                <!--v-show控制当前元素的display属性，根据v-show里面的值来判断，true显示，false不显示-->
                <ul v-show="open" v-if="isFolder">
                    <!--model用于双向绑定数据-->
                    <item class="item" v-for="model in model.children" :model="model">
                    </item>
                </ul>
            </li>
     </script>

:class="[open ?'glyphicon glyphicon-chevron-down':'glyphicon glyphicon-chevron-right']"
主要是判断父类的名字前面图标显示什么？如果是open子类那么就显示向下的箭头，如果是不显展开子类就是显示向右的箭头

<pre style="background-color:#272822;color:#f8f8f2;font-family:'Consolas';font-size:13.5pt;">@click="toggle"</pre>打开树结构的事件监控

<ul  id="MenuTree">
    <i class="glyphicon glyphicon-bookmark fa fa-file blue"></i>
         <span>首页</span>
         <item  class="item" :model="RobotData"></item>
         <item  class="item" :model="ConfigData"></item>
         <item  class="item" :model="MgData"></item>
         <item  class="item" :model="LibaryData"></item>

通过ul、item 的嵌套来显示树结构的显示

实现效果

总结：

目前已经现实了树结构菜单的双向数据绑定，后续在讲讲ifram的使用和树结构的事件监听