## 全局化注冊組件
全局化就是在構造器的外部用Vue.component來注冊，我們注冊現在就注冊一個`<jspang></jspang>`的組件來體驗一下。
~~~javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-1</title>
</head>
<body>
<h1>component-1</h1>
<hr>
<div id="app">
<jspang></jspang>
</div>
<script type="text/javascript">
//注冊全局組件
Vue.component('jspang',{
template:`<div style="color:red;">全局化注冊的jspang標簽</div>`
})
var app=new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
~~~
我們在 javascript 里注冊了一個組件，在 HTML 中調用了他。這就是最簡單的一個組件的編寫方法，并且它可以放到多個構造器的作用域里。
### 局部注冊組件
局部注冊組件和全局注冊組件是向對應的，局部注冊的組件只能在組件注冊的作用域里進行使用，其他作用域使用無效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-1</title>
</head>
<body>
<h1>component-1</h1>
<hr>
<div id="app">
<panda></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">局部注冊的panda標簽</div>`
}
}
})
</script>
</body>
</html>
從代碼中你可以看出局部注冊其實就是寫在構造器里，但是你需要注意的是，構造器里的components 是加s的，而全局注冊是不加s的。
### 組件和指令的區別
組件注冊的是一個標簽，而指令注冊的是已有標簽里的一個屬性。在實際開發中我們還是用組件比較多，指令用的比較少。因為指令看起來封裝的沒那么好，這只是個人觀點。
