Vue项目实战（三）- 组件的注册和使用

友情链接

Vue项目实战（一）- 从0到1的蜕变
Vue项目实战（二）- 引入JQuery等第三方库
Vue项目实战（三）- 组件的注册和使用
Vue项目实战（四）- 组件之间的通信

1、添加公用组件

如果一个组件每个页面都要用到，比如导航栏和页尾，那么可以通过这个方法来注册和使用组件，步骤如下：

1、在src/components里面新建一个headerBar.vue文件，作为导航栏组件，这里假设你对vue的语法已经很了解了，demo如下：

<!--因为用到了bootstrap，请参考上一篇教程引入bootstrap文件-->
<template>
  <div>
    <header>
      <nav class="navbar navbar-fixed-top navbar-default">
        <div class="container">
          <div>
            <ul class="nav navbar-nav">
              <li><a href="/">个人主页</a></li>
              <li><a href="/#/html">网页专区</a></li>
              <li><a href="/">教程专区</a></li>
            </ul>
            <form class="navbar-form navbar-right" >
              <div class="has-feedback">
                <input