<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<!--
組件：就是為了拆分Vue實例的代碼量，能夠讓我們以不同的組件，來划分功能模塊
模塊化：從代碼邏輯的角度進行划分的，方便代碼分層開發，保證每個功能模塊的職能單一
組件化：從UI界面的角度進行划分的，前端的組件化，方便UI組件的重用
-->
<!--創建組件的方式-->
<div id="app">
<!--駝峰命名-->
<!--<my-com1></my-com1>-->
<!--不使用駝峰命名-->
<!--<mycom1></mycom1>-->
<!--第3種創建方式-->
<mycom3></mycom3>
</div>
<template id="temp1">
<div>
<h1>這是通過 template 元素，在外部定義的組件結構，這個方式，有代碼的只能提示和高亮</h1>
<h4>123456</h4>
</div>
</template>
<script>
//創建組件的方式1：================================================
//1：使用Vue.extend 來創建全局的Vue組件
// const com1=Vue.extend({
// //通過 template 屬性，指定了組件要展示的HTML結構
// template:'<h3>這是使用 Vue.extend 來創建的組件</h3>'
// });
//2：使用Vue.component('組件的名稱'，創建出來的組件模板對象)
// Vue.component('myCom1',com1);
//如果使用 Vue.component 定義全局組件的時候，組件名稱使用了駝峰命名法，則在引用組件的時候，需要把大寫的駝峰改為小寫的字母，同時兩個單詞之間使用 - 連接
//如果不使用駝峰命名，則直接拿名稱來使用
// Vue.component('mycom1',com1);
//簡寫：s
// Vue.component('mycom1',Vue.extend({
// template:'<h3>這是使用 Vue.extend 來創建的組件</h3>'
// }));
//創建組件的方式2：================================================
// Vue.component('mycom1',{
// //注意：不論是哪種方式創建出來的組件，組件的 template 屬性指向的模板內容，必須有且只能有唯一的一個根元素
// template:'<div><h3>這是使用 Vue.component 來創建的組件</h3><span>123</span></div>'
// });
//創建組件的方式3：================================================
Vue.component('mycom3',{
template:'#temp1'
});
//3種創建組件都需要創建vue 實例
const vm=new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
</body>
</html>