什麼是組件？ 組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件就可以了。 組件化和模塊化的區別 模塊化：是從代碼邏輯的角度進行劃分的，方便代碼分層開發，保證每個模塊功能的職能單一。例如：NodeJS 組件化： ...
什麼是組件？
組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件就可以了。
組件化和模塊化的區別
- 模塊化：是從代碼邏輯的角度進行劃分的，方便代碼分層開發，保證每個模塊功能的職能單一。例如：NodeJS
- 組件化：是從UI界面的角度進行劃分的，前端的組件化，方便UI組件的重用
方式一
使用 Vue.extend 配合 Vue.component 來進行創建全局組件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>獨秀不愛秀</title>
</head>
<body>
<div id="app">
<!-- 如果要使用組件，直接把組件的名稱，以 HTML 標簽的形式，引入到頁面中 -->
<mycom1></mycom1>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
// 1.1 使用 Vue.extend 來創建全局的 Vue 組件
const com1 = Vue.extend({
template: '<h3>這是使用 Vue.extent 創建的組件</h3>'// 通過 template 屬性，指定組件要展示的 HTML 結構
});
// 1.2 使用 Vue.component('組件的名稱', 創建出來的組件模板對象)
// Vue.component('myCom1', com1);
// 如果使用 Vue.component 定義全局組件的時候，組件名使用了 駝峰命名，則
// 在引用的時候，需要把大寫字元改為小寫字元，同時，兩個單詞連接使用 -
Vue.component('mycom1', com1);
const vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
當然，方式一也可以直接將第一步驟省略，直接：
Vue.component('mycom1', Vue.extend({
template: '<h3>這是使用 Vue.extend 創建的組件</h3>'
}));
方式二
直接使用 Vue.component 創建組件（其實就是在方式一的基礎上更加省略而已）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>獨秀不愛秀</title>
</head>
<body>
<div id="app">
<mycom2></mycom2>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
/**
* 2. 直接使用 Vue.component 創建組件
* @param1 {String} 組件的名稱
* @param2 {Object} 組件模板對象
*/
Vue.component('mycom2', {
// 註意：無論是哪種方式創建出來的組件，組件的模板中必須有且只有一個唯一的根元素
template: '<div><h1>這是直接用 Vue.component 創建的組件</h1><span>123</span></div>'
});
const vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
方式三
在 方式二的基礎上將第二個參數中的HTML代碼結構，替換為一個 ID：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>獨秀不愛秀</title>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 在被控制的 #APP 外面，使用 template 元素定義組件的模板結構 -->
<template id="tmpl">
<div>
<h1>這是通過 template 元素，在外部定義的組件結構，這個方式，有代碼的智能提示和高亮</h1>
<h3>不錯，好用</h3>
</div>
</template>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
Vue.component('mycom3', {
template: '#tmpl'
});
const vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
