最近做的一个博客的小例子（一）

最新推荐文章于 2024-08-25 08:46:51 发布

有朝一日我必全栈

最新推荐文章于 2024-08-25 08:46:51 发布

阅读量701

点赞数 1

文章标签： vue 博客

本文链接：https://blog.csdn.net/q448366830/article/details/96573751

版权

本文记录了一个使用Vue、vue cli3、vue router、axios和fire base搭建的博客系统的实现过程。首先介绍如何创建Vue脚手架，然后逐步构建包括增加博客、展示博客在内的组件。通过v-model实现数据双向绑定，确保用户输入能实时反映在视图上。最后，通过绑定点击事件触发数据发送，但具体数据发送至fire base的部分将在后续文章中详述。

摘要由CSDN通过智能技术生成

这个博客的功能虽然挺少，但是使用起来还是对vue的理解有了一点的进步。
这个小项目的技术栈为：vue,vue cli3,vue router,axios,fire base。
编辑器是使用的vs code。
首先先建立vue的脚手架，使用命令：vue create . 。在一个我创建好的目录之下建立脚手架。
之后把脚手架中默认的内容去掉。

首先我的博客的常规布局需要用到四个组件。
1、顶部导航栏。（公共组件）
2、增加博客的组件。
3、展现总博客的组件。
4、展现单独博客的组件。

首先定义的肯定不是顶部导航栏，导航栏的作用就是连通着各个组件的枢纽。组件都还没建立起来，怎么会先建立起枢纽呢？
一开始先建立的应该是“增加博客的组件”
如下

在这里插入图片描述
这个东西很简单就可以写出来了，在component目录下创建一个vue文件，名字随你喜欢。我这就是取名“addBlog.vue”了。
按照常规先是把一个组件的模板先打出来。然后在template里面讲这个页面所有的html元素敲出来。
一个H1的抬头，一个input，一个textarea，一个checkbox，一个option，一个button。
有了这些元素之后，肯定要把元素内容给提炼出来的，不然的话就像一个笔记本，只有你自己看得到了。
vue的话自然是使用v-model方便了。可以双向的更新数据，何乐而不为呢？
直接用上model。