簡單了解其實元件就是制作自定義的标簽，這些标簽在HTML中是沒有的。
元件注冊的是一個标簽，而指令注冊的是已有标簽裡的一個屬性。在實際開發中我們還是用元件比較多，指令用的比較少。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
<!--<my-component></my-component>-->
<!--可重用性-->
<!--<my-component2></my-component2>-->
<!--此處不渲染-->
</div>
<!--<my-component></my-component>-->
<!--此處不渲染-->
<p>----------------分割線--------------------</p>
<div id="app2">
<my-component></my-component>
<my-component2></my-component2>
<my-component3></my-component3>
</div>
<my-component3></my-component3>
<script>
var myComponent = Vue.extend({
template: "<div>這是我的第一個component</div>"
})
//全局元件
Vue.component('my-component', myComponent)
new Vue({
el: "#app"
})
var hello = {
template: "<div>這是我的第三個component</div>"
}
new Vue({
el: '#app2',
//局部元件
components: {
"my-component2": {
template: "<div>這是我的第二個component</div>"
},
"my-component3": hello
}
})
</script>
</body>
</html> 全局注冊：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>這是一個component
<p>123</p>
<a>456</a>
</div>
</template>
<script>
//全局注冊
/*Vue.component("my-component",{
template:"#myComponent"
})*/
var vm = new Vue({
el: "#app",
components: {
"my-component": {
template: "#myComponent"
}
}
})
</script>
</body>
</html> 局部注冊：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<script>
var Child = {
template:"<p>This is a child Component</p>"
}
//var Parent = Vue.extend()
Vue.component("parent-component",{
//局部注冊child元件，child元件隻能在parent元件内使用。
template:"<div><p>This is a parent Component</p><child-component></child-component></div>",
components:{
'child-component':Child
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html> ![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)