## 全局化注册组件
全局化就是在构造器的外部用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的。
### 组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。
