元件化是當今最為流行的一種可復用性增加的方法，隨著當今前端開發的複雜度更加，這個元件化變得越來越流行
vue.js通過vue.extend() 方法來擴充套件元件的使用
vue.extend( options ) 裡面的options引數和 vue(options) 的options引數幾乎是一致的
new vue出來的 viewmodel( 檢視模型 ) 也是乙個元件，我們稱之為 『根例項元件』 ，叫 『root』 元件
vue中元件的表現形式是類似於標籤的，要想像標籤一樣使用，就必須得符合 h5 的規則，也就是必須要進行元件的註冊
元件的註冊有兩種形式
全域性註冊
區域性註冊
//new vue(
//})
newvue(}
})
元件必須先註冊再使用
元件中的模板需要使用乙個叫做template的配置項表示
//1. 元件的配置項
const hello = vue.
extend()
// 2. 元件的註冊
vue.
component
('hello'
, hello )
// 3. 元件的使用
newvue
()
vue.
component
('hello'
,)
>
>
hello
>
div>
"hello"
>
>
//只能有乙個根元素
>
hello template h3
>
>
hello template h3
>
>
hello template h3
>
div>
template
>
元件使用時有規則的：
比如特殊的一些標籤： ul>li----ol>li----table>tr>td----dl>dt>dd—select—option …這型別標籤，是規定了它們的直接子元素，當我們將元件寫入這型別標籤的時候，就會發現有問題
解決方法： 在直接子元素身上，通過 is 屬性來 繫結乙個元件
舉例：
>
>
>
1td>
>
2td>
>
3td>
tr>
tr>
//正確寫法
table
>
元件巢狀
全域性註冊： 要將子元件的元件名寫在父元件的template中
>
>
father
>
div>
"father"
>
>
>
father h3
>
>
>
son>
div>
template
>
"son"
>
>
son h3
>
template
>
vue.
component
('father',)
vue.
component
('son',)
newvue
()
new
vue(}}
}})
Vue元件化之構造元件
在構建專案中盡可能的將頁面分成乙個個小的 可復用的元件。一 構造全域性元件 但必須在例項掛載的元素中使用 註冊元件 vue.component cpn,cpnc 給構造器中的模板命名為cpn 即標籤的名字 使用元件 二 語法糖註冊全域性元件 即將一二步合併 vue.component cpn com...
Vue元件化之父子元件
在父元件裡使用子元件時，父元件的模板最外層一定要有div塊 元件內部是無法訪問vm例項裡的data資料的，元件有自己的儲存資料的位置。元件也有data methods 生命週期函式等屬性，但data必須是乙個函式且返回的是乙個物件，物件內部儲存著資料。為什麼元件裡的data必須是函式形式？當重複使用...
07 Vue元件化 建立元件 訪問元件
1 使用webstorm建立乙個vue專案 2 使用命令列載入相關依賴 cnpm install3 檢視建立好的專案src目錄結構 如上圖所示，webstorm已經在src目錄下生成了乙個 asserts 靜態資源目錄 乙個 components 元件目錄 乙個 router 路由配置目錄 其中 c...