从后端到前端之Vue（三）小结以及一颗真实的大树

　　上一篇写了一下tab，下面整理一下用过的知识点，本想按照官网的文档，整理一下能够更清晰，结果也许是个人方法不对吧，总之更模糊了。

按照官网文档的顺序整理到了表单输入绑定以前，由于以前大体也就只涉及到这一些，另一个缘由就是整理的有点头晕晕。

先展现一下成果吧。Emmm，好吧，很怀疑本身的概括总结的能力，这都是怎么归类的，这么乱呢？这可怎么看？最后，是否是能够吐槽一下官方文档，有点太散乱了。先记录一下，而后在整理，由于如今掌握的知识点还不够全面。

图片

 

 

1、目标 —— 一颗真实的大树

　　下面开始作大树。首先介绍一下背景，之前有一个本身的项目，也是先后端分离的设计，后端用asp.net开发，有不少现成的api接口，能够提供页面描述信息以及各类数据。前端用jQuery，本身写了几个插件实现的。

　　如今正好拿来作一下对比，同时也圆了我之前的一个梦想——后端不变的状况下，前端能够换各类UI！那时候前端框架的概念还不流行呢。如今的梦想就是：后端不变，前端换各类框架。

　　因此打算直接用之前的后端接口来作。这样不就省着等后端开发了嘛，并且这是彻底真实的数据，比假想一些需求要好的多。

　　树作好了以后，加上事件，能够动态建立tab。

 

2、思路

　　后端有一个接口能够提供树的数据，那么咱们直接拿过来用。树的结构很是简单，只不过有点非主流，是我本身设计的，本身用着爽就行了。

　　而后把上次的tab拿过来改改。基本就是这样了。固然后面还要加上数据列表，还有分页控件，还有按钮控件，最后还有最麻烦的表单控件。这些控件放在下次再说。

3、设计与编码

1.   获取后端数据和data设计

　　使用vue-resource.min.js ，这个是我百度的，后来发现彷佛要用axios。Emmm先不改了。

 

　　后端会提供一个这样的数据，那么咱们根据这个数据作一个数据包，只保留须要的几个属性，其余的能够舍去。

var tree = new Vue({

        el: '#divTree',
        data: {
            trees: [
                {
                    ModuleID: -10,
                    ModuleLevel: 1,
                    ModuleName: "系统管理",
                    ParentID: 0,
                    ParentIDAll: "0"
                    URL: "#"
                }
            ]
        },

        methods: {
            //下面介绍
            }
        }
});

 

2.   模板设计

<div id="divTree">
            <div v-bind:id="'tree_' + tree.ModuleID" v-for="tree in trees" v-on:click="treeClick(tree.ModuleID,tree.ModuleName)" v-bind:class="'tree' + tree.ModuleLevel">{{tree.ModuleName}}</div>
</div>

 

 

　　模板的地方就很简单了，这里使用样式表来设定树的递进结构。

 

3.   树事件设计

methods: {

            treeClick: function (id,title) {
                //隐藏当前的tab
                var oldId = tab.currentTabId; //记录切换前tab的id
                tab.beforeTabId = oldId;
                tab.tabs["tab" + oldId].isShow = false;  //隐藏切换前的tab
                tabDiv.tabMains["tab" + oldId].isShow = false;  //隐藏切换前的tab容器
                tab.currentTabId = id;  //记录新的id

                //建立tab
                var newTab = {
                    //能够有多个标签，
                    id: id, //标签识别标示
                    title: title,
                    isShow: true, //是否显示
                    message: title
                };
 
                //建立tab 的容器
                var main = {
                    //能够有多个标签，
                    message:title,
                    isShow: true, //是否显示
                    tabId: id //标签识别标示
                };

                if (typeof (tab.tabs["tab" + id]) === "undefined")
                    tab.tabNumber = tab.tabNumber + 1;
               
                Vue.set(tab.tabs, "tab" + id, newTab);
                Vue.set(tabDiv.tabMains, "tab" + id, main);
  
            }        

 

 

　　这里是点击节点，动态建立tab。而后tab里面是空的。这个还不太清楚，若是实现tab里面的内容能够随便设定，如今只能实现tab里面用table，可是这个显然太呆板了，不符合需求。看看vue里面的介绍吧。一步一步来。

 

 

 

4、          运行效果

截个图吧。也不太好标示效果。

 

5、          总结

初步使用vue没啥问题，问题是熟练使用以及思路的变换。由于对vue不熟，因此第一反应仍是用之前的方法如何来实现。这个嘛，一点一点的换成vue的方式呗，还能够顺便作个对比。哪一种方式更好，确定选更舒服的方式了。