Vue中使用組件的三大步驟：
一、定義組件(創建組件)
二、注冊組件
三、使用組件(寫組件標簽)
一、如何定義一個組件？
使用Vue.extend(options)創建，其中options和new Vue(options)時傳入的那個options幾乎一樣，但也有點區別；
區別如下：
1.el不要寫，為什么？ ——— 最終所有的組件都要經過一個vm的管理，由vm中的el決定服務哪個容器。
2.data必須寫成函數，為什么？ ———— 避免組件被復用時，數據存在引用關系。
備注：使用template可以配置組件結構。
二、如何注冊組件？
1.局部注冊：靠new Vue的時候傳入components選項
2.全局注冊：靠Vue.component('組件名',組件)
三、編寫組件標簽：
<school></school>
幾個注意點：
1.關於組件名:
一個單詞組成：
第一種寫法(首字母小寫)：school
第二種寫法(首字母大寫)：School
多個單詞組成：
第一種寫法(kebab-case命名)：my-school
第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支持)
備注：
(1).組件名盡可能回避HTML中已有的元素名稱，例如：h2、H2都不行。
(2).可以使用name配置項指定組件在開發者工具中呈現的名字。
2.關於組件標簽:
第一種寫法：<school></school>
第二種寫法：<school/>
備注：不用使用腳手架時，<school/>會導致后續組件不能渲染。
3.一個簡寫方式：
const school = Vue.extend(options) 可簡寫為：const school = options
非單文件組件（了解）：一個文件包含n個組件
1. 模板編寫沒有提示
2. 沒有構建過程, 無法將 ES6 轉換成 ES5
3. 不支持組件的 CSS
4. 真正開發中幾乎不用
代碼舉例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准備好一個容器--> <div id="root"> <hello></hello> <hr> <h1>{{msg}}</h1> <hr> <!-- 第三步：編寫組件標簽 --> <school></school> <hr> <!-- 第三步：編寫組件標簽 --> <student></student> </div> <div id="root2"> <hello></hello> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //第一步：創建school組件 const school = Vue.extend({ template:` <div class="demo"> <h2>學校名稱：{{schoolName}}</h2> <h2>學校地址：{{address}}</h2> <button @click="showName">點我提示學校名</button> </div> `, // el:'#root', //組件定義時，一定不要寫el配置項，因為最終所有的組件都要被一個vm管理，由vm決定服務於哪個容器。 data(){ return { schoolName:'西華大學', address:'成都郫縣' } }, methods: { showName(){ alert(this.schoolName) } }, }) //第一步：創建student組件 const student = Vue.extend({ template:` <div> <h2>學生姓名：{{studentName}}</h2> <h2>學生年齡：{{age}}</h2> </div> `, data(){ return { studentName:'wangxq', age:22 } } }) //第一步：創建hello組件 const hello = Vue.extend({ template:` <div> <h2>你好啊！{{name}}</h2> </div> `, data(){ return { name:'tanglb' } } }) //第二步：全局注冊組件 Vue.component('hello',hello) //創建vm new Vue({ el:'#root', data:{ msg:'你好啊！' }, //第二步：注冊組件（局部注冊） components:{ school, student } }) new Vue({ el:'#root2', }) </script> </html>
運行結果：hello是全局組件，分別使用2個vm實例展示hello組件，來區分全局組件和局部組件的使用，局部組件作用於定義的該局部組件的vm實例，而全局組件，所有vm實例都可以使用
