是Metonic框架中自行实现的表格,其底层是,本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库,jQuery做部分用户交互(弹窗)。
使用到的库:Vue 2.0,Bootstrap3、jQuery2、font-awesome4,均可在下载
一、需求和原型设计
产品目标是一个
图书管理表格
,书籍字段:书籍名称、分类、价格、更新时间。需求:
① 书籍信息的增删改
③ 能展示 根据任一字段进行关键字匹配后的条目
④ 能自动保存本次操作的数据
原型:
原型说明:
② 点击修改时,上部表单内容为原始数据,“添加”按钮变为“修改”,此时点击修改,才将数据保存生效;如果此时点击重新填写则是放弃修改。
二、准备工作
① 搭建运行环境
不建议使用浏览器直接打开网页,建议搭建一个Web环境来进行测试。
建议使用WAMP、XAMPP等集成环境,安装简便易于操作
② 引入各类库
注意vue.js的路径,下载到本地进行引入(此处使用的是web绝对路径'/static/vue.js')
③ 进行最简单的Vue测试
值得注意的是,
el选项不能为‘body'或‘html'
,否则会提示警告信息并且不能正常渲染。生产版本的vue则不会产生警告信息,并且不能正常渲染
。三、数据输入(添加、修改)
按照原型图:
写出表单:
那么点击按钮的时候,就会弹出来(此处需要引入bootstrap.js哦) ① ‘fade‘ 表示模态框是淡入淡出的 ② 'bs-example-modal-sm' 是指模态框的大小是'sm‘ 五步完成后,样子是:
(额这个录屏的工具貌似吧table-striped的效果抹去了。。。)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/vue/39932.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。