Step1：Vue.extend()創建組件
Step2：Vue.component()注冊組件，注冊的標簽一定要用小寫
Step3：掛載點使用組件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3 Step 創建一個組件</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app1">
<!-- Step3：掛載點1使用組件 -->
<my-component></my-component>
</div>
<div id="app2">
<!-- Step3：掛載點2使用組件 -->
<my-component></my-component>
</div>
<div>
<!-- 這里不屬於掛載點，所以不會顯示！ -->
<my-component></my-component>
</div>
<script type="text/javascript">
//Step1：創建組件
var myComponent = Vue.extend({
template: "<div>這是一個組件</div>"
})
//Step2：注冊組件 在這里采用"全局注冊"組件，也就是每個掛載點都可以使用組件
Vue.component('my-component', myComponent)
new Vue({
el: '#app1', //掛載點1
})
new Vue({
el: '#app2' //掛載點2
})
</script>
</body>
</html>
全局注冊和局部注冊
全局注冊:
Vue.component('my-component', myComponent)
局部注冊:
我們需要在聲明掛載點的地方注入組件即可：
new Vue({
el: '#app1',
components:{
'my-component', myComponent'
}
})
這樣只能在掛載點為#app1地方使用my-component組件，在掛載點#app2的地方使用my-component組件就會報錯。
語法糖創建並注冊組件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3 Step 創建一個組件</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app1">
<!-- Step3：掛載點1使用組件 -->
<my-component></my-component>
</div>
<div id="app2">
<!-- Step3：掛載點2使用組件 -->
<my-component></my-component>
<hr>
<strong>使用語法糖創建並注冊組件</strong>
<sugar-component></sugar-component>
</div>
<div>
<!-- 這里不屬於掛載點，所以不會顯示！ -->
<my-component></my-component>
</div>
<hr >
<strong>使用語法糖在局部注冊並創建多個組件</strong>
<div id="app3">
<sugar-component2></sugar-component2>
<sugar-component3></sugar-component3>
</div>
<script type="text/javascript">
//Step1：創建組件
var myComponent = Vue.extend({
template: "<div>這是一個組件</div>"
})
//Step2：注冊組件 在這里采用"全局注冊"組件，也就是每個掛載點都可以使用組件
Vue.component('my-component', myComponent)
//Step2: 可以使用語法糖,省略Step1,“全局注冊”組件的同時創建模板內容
Vue.component('sugar-component', {
template: '<div>這是用語法糖創建並注冊的組件，這樣就可以省略自己使用Vue.extend創建組件的步驟，系統會自動為我們使用Vue.extend去創建組件。</div>'
})
new Vue({
el: '#app1', //掛載點1
})
new Vue({
el: '#app2' //掛載點2
})
new Vue({
el: '#app3', //掛載點3,同樣可以再局部使用語法糖創建並注冊組件
components: {
'sugar-component2': {
template: '<div>這是使用語法糖在局部注冊並創建組件的內容。</div>'
},
'sugar-component3': {
template: '<div>使用語法糖，在局部可以同時創建並注冊“多個組件”的內容。</div>'
}
}
})
</script>
</body>
</html>