Step1：Vue.extend()創建組件 Step2：Vue.component()註冊組件，註冊的標簽一定要用小寫 Step3：掛載點使用組件 全局註冊和局部註冊 全局註冊: 局部註冊: 我們需要在聲明掛載點的地方註入組件即可： 這樣只能在掛載點為 app1地方使用my component組件 ...
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>
