定義Vue元件
什麼是元件： 元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可；元件化和模組化的不同：
模組化： 是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，保證每個功能模組的職能單一；
元件化： 是從UI介面的角度進行劃分的；前端的元件化，方便UI元件的重用；

全域性元件定義的三種方式
使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
      template: '<h1>登入</h1>'
    });
    Vue.component('login', login);
 

直接使用 Vue.component 方法：

Vue.component('register', {
      template: '<h1>註冊</h1>'
    });

將模板字串，定義到script標籤種：

<script id="tmpl" type="x-template">
      <div><a href="#">登入</a> | <a href="#">註冊</a></div>
    </script>

同時，需要使用 Vue.component 來定義元件：

Vue.component('account', {
      template: '#tmpl'
    });

注意： 元件中的DOM結構，有且只能有唯一的根元素（Root Element）來進行包裹！
元件中展示資料和響應事件
在元件中，data需要被定義為一個方法，例如：

Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好！'
        }
      },
      methods:{
        login(){
          alert('點選了登入按鈕');
        }
      }
    });
 

在子元件中，如果將模板字串，定義到了script標籤中，那麼，要訪問子元件身上的data屬性中的值，需要使用this來訪問；