vuejs之元件介紹及簡單使用

對於一些大型的**，我們可以看到他們的各部分頁面其實有很多事相同的，如頭部和尾部，以及一樣列表的樣式，它們都是可以被反覆使用的。為了**的復用和後期維護的方便，我們一般會盡可能將公共的那一部分提取出來，形成單獨的一部份，供其他地方使用，我們把這公共的部分叫做元件

元件裡一般會包括頁面結構，樣式，資料和生命週期函式

如果我們做的足夠的抽象提取，那麼這些公共的部分可以被很多第三方進行使用。這種一般稱為第三方的元件（如 bootstrap）

為了**的復用和便於後期的維護

官網文件，如有興趣可以進去看看）

元件是可復用的 vue 例項，且帶有乙個名字（官網解釋）

vuejs 中元件分為兩種：

1：全域性元件：需要定義在 vue 例項化物件之前定義例項化，相當於是宣告

2：區域性元件：必須定義在例項化物件裡面

接下來我們就來單獨看一看

1: 定義乙個全域性元件，用 component 方法，裡面有兩個引數

引數1：元件的名稱（1：元件的名稱，不要和系統標籤重名；2：元件的命名建議使用烤串式命名法（中劃線命名））

因為瀏覽器對於不認識的標籤不會報錯，並且不區分大小寫，統一轉換成小寫，這樣一來，我們在定義的時候用的是小駝峰，但是我們在呼叫的時候瀏覽器把它轉成小寫，就找不到我們定義的元件了

引數2：元件的描述，是乙個物件，物件用來描述這些元件的行為，元件被呼叫後應該呈現什麼樣子，元件裡的資料等

引數 2 裡面的基本屬性：template：元件的模板（元件的 dom 結構），通俗一點就是 vuejs 元件就是我們開發者自定義的 html 標籤，他就像系統的 html 標籤一樣，能夠被解析，我們來看一下面的例子

//定義在 vm 物件之前
//mycomponent:元件的名字（我們自定 html 的名字）
//template:元件的 dom 結構
vue.
component
("mycomponent",)
var vm =
newvue(}
)<
/script>

2: 使用元件：之前說了我們的元件就是自定義的 html 標籤，那我們也要向 html 標籤一樣使用它，可以是單標籤，也可以是雙標籤（但是如果有資料，則必須為雙標籤）

元件的本質：就是使用我們定義元件時候的 template 裡面的模板替換頁面上的元件

"box"
>
}<
/h1>
//引用元件
<
/mycomponent>
<
/div>

3: vue 元件模板裡有且僅有乙個根節點

vue.
component
("mycomponent"
,)

我們看到，如果我們這樣寫的話，控制台就會給我們警告，因為 vue 元件模板裡有且僅有乙個根節點所以我們以後一上來就要定義根節點，這樣就好了

vue.
component
("mycomponent"
,)

1: 定義乙個區域性元件，必須定義在例項化物件裡面

var vm =
newvue(,
components:
, mycomponent2:}}
)<
/script>

2：使用方式與全域性元件一樣，可以用單標籤也可以用雙標籤

"box"
>
<
/mycomponent>
<
/div>

3：使用方式與全域性元件一樣，可以用單標籤也可以用雙標籤

從上面的例子我們可以看出，定義區域性元件的時候，如果區域性元件的元件物件很多，全部放在例項物件裡面也不太好，所以我們一般都是將例項物件單獨拿出來的

"box"
>
<
/mycomponent>
>
<
/div>
var component_out =
var vm =
newvue(,
components:
, component_out,}}
)<
/script>