VueJs使用Amaze ui调整列表和内容页面

前端之家收集整理的这篇文章主要介绍了VueJs使用Amaze ui调整列表和内容页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

制作左侧菜单

一个后台管理系统,大致的样式都是分为南北东西的,而西(也就是左侧)一般是我们的菜单。如图:

我们今天就来把我们的项目完成到如上图的样式,首先我们来制作左侧的菜单,在/src/components/下新建menu.vue。代码如下:

    {{child.name}}

现在我们的菜单就已经做好了,只需要将菜单应用到我们的项目中就可以了。打开/src/App.vue,修改如下位置:

调整列表页

打开/src/pages/Index.vue代码如下:

/ InBox

新增
搜索
标题修改日期 编辑
  • 注意:上面我们初始化查询第一页的数据,并规定每页显示10条,我们没有做分页功能的开发。是由于cnodejs.org的api并没有给我们返回分页的信息,将来如果是实际开发,那么接口正常情况是会返回分页信息的,我们到时候再具体的渲染就好了。

    调整内容页面

    打开/src/pages/Content.vue,代码如下:

    作者:{{article.author.loginname}}  发表于:{{article.create_at}}


    到此为止我们就完成了列表页面和内容页面的整合了,说明一下在调整后的script中,多了个mounted 方法,这个是vuejs的勾子函数,我理解的意思表示元素已经创建,数据也渲染完成。我们来设置admin-content的高度就没有问题了,不过这个我不确定是我的写法有问题,还是Amaze ui和vuejs整合后的影响,目前只能这样解决了。

    最终效果

    列表页面:

    内容页面

    总结

    以上所述是小编给大家介绍的VueJs使用Amaze ui调整列表和内容页面。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/vue/34937.html
    amazeuiuiuivuejs

    猜你在找的Vue相关文章