作者：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的使用和树结构的事件监听
