专栏首页更流畅、简洁的软件开发方式从后端到前端之Vue(三)小结

从后端到前端之Vue(三)小结

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

按照官网文档的顺序整理到了表单输入绑定之前,因为之前大致也就只涉及到这一些,另外一个原因就是整理的有点头晕晕。

先展示一下成果吧。Emmm,好吧,很怀疑自己的归纳总结的能力,这都是怎么归类的,这么乱呢?这可怎么看?最后,是不是可以吐槽一下官方文档,有点太散乱了。先记录一下,然后在整理,因为现在掌握的知识点还不够全面。

图片

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

  下面开始做大树。首先介绍一下背景,以前有一个自己的项目,也是前后端分离的设计,后端用asp.net开发,有很多现成的api接口,可以提供页面描述信息以及各种数据。前端用jQuery,自己写了几个插件实现的。

  现在正好拿来做一下对比,同时也圆了我以前的一个梦想——后端不变的情况下,前端可以换各种UI!那时候前端框架的概念还不流行呢。现在的梦想就是:后端不变,前端换各种框架

  所以打算直接用以前的后端接口来做。这样不就省着等后端开发了嘛,而且这是完全真实的数据,比假想一些需求要好的多。

  树做好了之后,加上事件,可以动态创建tab。

二、思路

  后端有一个接口可以提供树的数据,那么我们直接拿过来用。树的结构非常简单,只不过有点非主流,是我自己设计的,自己用着爽就好了。

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

三、设计与编码

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里面的介绍吧。一步一步来。

四、 运行效果

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

五、 总结

初步使用vue没啥问题,问题是熟练使用以及思路的变换。因为对vue不熟,所以第一反应还是用以前的方法如何来实现。这个嘛,一点一点的换成vue的方式呗,还可以顺便做个对比。哪种方式更好,肯定选更舒服的方式了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从后端到前端之Vue(二)写个tab试试水 1.    数据包2.    模板

      上一篇写了一下table,然后要写什么呢?当然是tab了。动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了。

    用户1174620
  • 从后端到前端之Vue(四)小试牛刀

      学以致用嘛,学了这么多,在真实项目里面怎么应用呢?带着问题去学习才是最快的学习方式。还是以前的那个项目,前后端分离,现在把前端换成vue的,暂时采用脚本化的...

    用户1174620
  • 数据访问函数库 for ado.net2.0

    前言 源代码和调用演示下载:http://www.cnblogs.com/jyk/archive/2008/04/25/1170979.html 数据访问函...

    用户1174620
  • MarkDown 创建目录

    onety码生
  • 从后端到前端之Vue(二)写个tab试试水 1.    数据包2.    模板

      上一篇写了一下table,然后要写什么呢?当然是tab了。动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了。

    用户1174620
  • 批量 SQL 之 FORALL 语句

        对PL/SQL而言,任何的PL/SQL块或者子程序都是PL/SQL引擎来处理,而其中包含的SQL语句则由PL/SQL引擎发送SQL语句转交到SQL引擎...

    Leshami
  • ExtJS4中设置tabpanel的tab高度问题

      最近碰到个问题,在ExtJS中应该如何设置tabpanel的tab的高度?因为默认情况下,tab的高度太矮了,以至于tab的标题底部字都被截掉。设置了个ta...

    hbbliyong
  • 如何查看某个js 变量 runtime 类型

    一种办法是根据byId传入的id value到具体的xml view里根据id 查询,可得知tab 是一个指向List类型的变量。

    Jerry Wang
  • 增强Demo 01 销售订单屏幕增强

    下有两个留给header 和 item 做屏幕增强的 屏幕 8309 8310 8459 8460。

    sapliumeng
  • CSS常见属性

    现在的互联网前端三层: HTML 超文本标记语言 从语义的角度描述页面结构。 CSS 层叠式样式表 从审美的角度负责页面样式。 JS ...

    Demo_Yang

扫码关注云+社区

领取腾讯云代金券