元件系統是 vue.js 另乙個重要概念，因為它提供了一種抽象，讓我們可以用獨立可復用的小組件來構建大型應用。如果我們考慮到這點，幾乎任意型別的應用的介面都可以抽象為乙個元件樹：
在 vue 裡，乙個元件實質上是乙個擁有預定義選項的乙個 vue 例項：
//現在你可以在另乙個元件模板中寫入它：define a new component called todo-item
vue.component('todo-item', )
<但是這樣會為每個 todo 渲染同樣的文字，這看起來並不是很酷。應該將資料從父作用域傳到子元件。來修改一下元件的定義，使得它能夠接受乙個ol>
<
todo-item
>
todo-item
>
ol>
prop字段：
vue.component('todo-item', }'})現在，我們可以使用v-bind指令將 todo 傳到每乙個重複的元件中：
<完整**如下：div
id>
<
ol>
<
todo-item
v-for
="item in grocerylist"
v-bind:todo
="item"
>
todo-item
>
ol>
div>
vue.component('todo-item', }
li>'})
data: ,,]
}})
這只是乙個假設的例子，但是我們已經將應用分割成了兩個更小的單元，子元素通過props介面實現了與父親元素很好的解耦。我們現在可以在不影響到父應用的基礎上，進一步為我們的todo元件改進更多複雜的模板和邏輯。
在乙個大型應用中，為了使得開發過程可控，有必要將應用整體分割成乙個個的元件。在後面的教程中我們將詳述元件，不過這裡有乙個（假想）的例子，看看使用了元件的應用模板是什麼樣的：
<div
id>
<
>
>
<
>
<
>
>
<
>
>
>
div>
Vue元件應用構建
vue中，乙個元件本質上是乙個擁有預定義選項的乙個vue例項。在vue中註冊元件 定義名為todo item的新元件 vue.component todo item 現在可以用它構建另乙個元件模版 建立乙個todo item元件的例項 上面的缺點 會會每個代辦項渲染同樣的文字。我們應該從父作用域將資...
vue元件應用v model
一 input上的v model原理 vue中的v model最常用的就是在input節點上，像下面這樣 text v model message v model實際上是一種資料和方法繫結的語法糖 text value message input message event.target.value...
用vue元件封裝todolist
用vue元件封裝todolist cssbody header section label header input input focus h2span ol,ul li input pli p input li p input.editer liol li ul li li a footer f...