【Vue2】Vue2-简易图书借阅管理

🦖我是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领域博主