🦖我是Sam9029,一个前端
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
**🐱🐉🐱🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍**
简易Vue2-简易图书借阅管理
前言
熟悉vue2 的语法 以及深入使用与了解 组件开发
本着是做一个练习的小项目,采用的是外部导入Vue2,加手动注册组件的写法
外部导入Vue链接
项目运行是直接在 JS 中引入 Vue的CDN链接来使用
依赖链接 : https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
手动注册组件语法
- 其实与vue-cli项目中使用一样的
- 但是需要现在JS代码中如此注册
Vue.component('组件名',{
template:``,
data(){
return {}
},
methods:{},
computed:{},
})
即 使用 了
Vue.component()
这个命令来注册组件(全局环境下,即window)如要使用 直接 在
<组件/>` 中直接使用即可但是 若注册了多个组件,要使用子组件 则要使用 非自闭合的标签
<组件><自组件/></组件>
需求
- 一个页面结构组件
- 包含以下的三个组件
- 一个所有图书列表组件
- 展示所有图书数据(所有书籍都固定为一本)
- 拥有一个借阅按钮
- 借阅后显示被借阅了
- 一个我的图书列表组件
- 渲染目前借阅的书籍
- 拥有一个归还按钮
- 归还后消除该书籍数据
- 一个借阅历史组件 (进一步练习)
- 记录所有的借阅操作,以及书籍的借阅状态
其实就相当于一个
个人的书库
效果源码
源码地址:
vue组件-Sample Book Cent Manga (codepen.io)效果展示:
思路分析
注册四个组件
分别是
- 页面结构组件
- 书籍列表组件
- 我的借阅组件
- 借阅记录组件
四个组件的关系:
- 页面结构组件(父组件)
- 书籍列表组件(子)
- 我的借阅组件(子)
- 借阅记录组件(子)
页面结构组件的使用
设定所有书籍的数据源
根据需求来,我们可以先设定一个所有书籍数据的数据源,来保存所有的书籍信息数据、同时要保证所有的组件都能获取到其数据,所以就需要在唯一的父组件身上定义数据源
最合理的还是采用数组包对象的数据格式
[{},{}]
进一步拓展
[{bookId:'',bookName:'',price:'',press:'',borrowStatus:''},{……}]
当然啦,你也可以在对象中写入其他的你想要展示的信息
设定在组件的data属性中:
使用动态组件来实现页面的切换
因为有三个子组件,所有可以用动态组件来设置切换,
- 同时在
data
中设定一个currentCpn
的变量,来给动态组件的 is 属性绑定使用 - 同时从源数据中 筛选借阅状态为
true
的数据 传值给 动态组件(相当于传给子组件) - 同时把源数据传值给 动态组件
- 以及需要使用的方法
<!-- 动态绑定不能直接写,子组件名字,要在父组件的data中现定义一个变量,在赋值为子组件名 -->
<component
:is='currentCpn'
:bookData='bookData'
:myBorrowBookData='myBorrowBookData'
@borrowFoo='borrowFoo'
@returnFoo='returnFoo'
@deleteFoo='deleteFoo'>
</component>
所有组件的使用
接受值:
props:{ bookData:{ type:Array, default:()=>[] } },
- 根据组件具体需求,编写功能
待改进
- 给每本书设置数量
- 为书籍借阅设置
借阅期限
- 在
我的借阅
中添加借阅时间,到期提醒 - 在
历史借阅
中设置具体的借阅时间记录 - 样式优化
🦖我是Sam9029,一个前端
文章若有错误,敬请指正🙏
**🐱🐉🐱🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主