位置: 编程技术 - 正文
VueJs使用Amaze ui调整列表和内容页面(vue alain)
编辑：rootadmin推荐整理分享VueJs使用Amaze ui调整列表和内容页面(vue alain)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue aside,vue aside,vuejs怎么用,vuejs怎么用,vuejs使用路由参数使用数字占位符,vuejs使用路由参数使用数字占位符,vuejs使用他人项目,vuejs使用路由参数使用数字占位符,内容如对您有帮助，希望把文章链接给更多的朋友！
制作左侧菜单
一个后台管理系统，大致的样式都是分为南北东西的，而西（也就是左侧）一般是我们的菜单。如图：
我们今天就来把我们的项目完成到如上图的样式，首先我们来制作左侧的菜单，在/src/components/下新建menu.vue。代码如下：
现在我们的菜单就已经做好了，只需要将菜单应用到我们的项目中就可以了。打开/src/App.vue，修改如下位置：
调整列表页面
打开/src/pages/Index.vue代码如下：
注意：上面我们初始化查询第一页的数据，并规定每页显示条，我们没有做分页功能的开发。是由于cnodejs.org的api并没有给我们返回分页的信息，将来如果是实际开发，那么接口正常情况是会返回分页信息的，我们到时候再具体的渲染就好了。
调整内容页面
打开/src/pages/Content.vue，代码如下：
到此为止我们就完成了列表页面和内容页面的整合了，说明一下在调整后的script中，多了个mounted 方法，这个是vuejs的勾子函数，我理解的意思表示元素已经创建，数据也渲染完成。我们来设置admin-content的高度就没有问题了，不过这个我不确定是我的写法有问题，还是Amaze ui和vuejs整合后的影响，目前只能这样解决了。
最终效果
列表页面：
内容页面：
总结
以上所述是小编给大家介绍的VueJs使用Amaze ui调整列表和内容页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！
实例教学如何写vue插件 在学习之前，先问问自己，为什么要编写vue的插件。在一个项目中，尤其是大型项目，有很多部分需要复用，比如加载的loading动画，弹出框。如果一个
Vue+Vux项目实践完整代码 提供完整的路由，services`````````````-----------------------------------------------------------------------------------------------------------------------------------------------------------
vue2.x+webpack快速搭建前端项目框架详解 一、本文将分享如何快速搭起基于webpack+vue的前端项目框架，利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置，再通过npm包管理工具引入相应的
标签: vue alain
本文链接地址:https://www.jiuchutong.com/biancheng/378941.html 转载请保留说明！
