組件化開發基礎、分為三個步驟： 註冊組件 使用組件 步驟解析： 1、創建組件構造器對象 Vue.extend（）創建了一個組件構造器 通常在創建組件構造器的時候，通常會傳入 template 代表我們自定義組件的模板 該模板是使用組件的地方，顯示的HTML代碼 2、註冊組件 Vue.componen ...
組件化開發基礎、分為三個步驟：
- 創建組件構造器對象
- 註冊組件
- 使用組件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> </head> <div id="app"> <!-- 3、使用組件 --> <my-cpn /> </div> <body> <script> // 1、創建組件構造器對象 const cnpC = Vue.extend({ template: ` <div> <h2>我是標題</h2> <p>組件化開發的思想</p> </div> ` }) // 2、註冊組件 Vue.component('my-cpn', cnpC) let vm = new Vue({ el: '#app', data: () => ({}), methods: {} }) </script> </body> </html>
步驟解析：
1、創建組件構造器對象
Vue.extend（）創建了一個組件構造器
通常在創建組件構造器的時候，通常會傳入 template 代表我們自定義組件的模板
該模板是使用組件的地方，顯示的HTML代碼
2、註冊組件
Vue.component()
調用Vue.component() 是將剛纔組件構造器 構造的組件 註冊為一個組件 ，並且給它起一個標簽名
所需的有兩個參數：
1、標簽名 2、組件構造器名
3、使用組件
<my-cpn></my-cpn> 或 <my-cpn /> 註：組件必須掛載到VUE實例下麵才有效果，即#app 裡面
