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

这个博客的功能虽然挺少，但是使用起来还是对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。

没错，直接将数据直接全部写入data变成响应式的数据。
然后自然是一个一个的绑上html的标签上，这样就可以很轻松的拿到你在文本框或者是checkbox里面的数据了。

将这些七七八八的数据给绑定完了，就会获得一个博客的对象，这个对象里面的数据便是我们即将发送的博客所应该拥有的元素。
万事俱备只欠东风
最后肯定得来一个button绑定一个方法将这个博客对象给发送出去吧。

直接绑定@click.prevent="post"入button内。 将他默认的方法也给了post方法（这样可以取消他的默认行为，应为使用axios更新数据是不用刷新页面的，但是click的方法的默认行为便是刷新网页，这样会让用户产生不好的使用体验，这里将他的默认行为也给改了。当然，如果你不想取消默认行为也是可以的。这样将不会很酷。）。

然后在下面的方法内定义一个名字为post的方法。
这样一个写博客的页面就暂时大功告成了。

总感觉还少了点什么……对了，你写完一个博客并且发送成功肯定是要再看一看博客总览的吧！例如……

这样的。

很好办，只要我们将其的内容输出到页面上就行了，我们可以使用vue的{{}}来进行页面数据的双向绑定！

等等等等………你的博客怎么会有一个show的属性的东西。

其实也可以没有，但是我为了让他看起来很酷，所以我就 设定了一个名字为show的属性。
我们可以使用这个show的属性绑定在html的标签上（v-if）这样如果他是true，就会显示，如果是false那就会消失不见。
我们可以把改变他的状态的方法也绑定在post上，这样就显得比较完美了。一旦post将我们的数据发送成功，那么编辑框会因为show的true值改变成了false值而消失，显示框会变成true显示出来，这样就令我们的博客看起来非常酷。

最后，博客如何将数据发送至fire base的我会留在下次和你们详细说一说

回见~！