vue入門 元件基礎todolist

1. 以下是 todolist 的例子，沒有用到元件：下面的3 會通過元件拆分todolist

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>...
head
>
4<
body
>
5<
div 
id="root"
>
6<
div>
7<
input 
v-model
="inputvalue"
/>
8<
button 
v-on:click
="submit"
>提交
button
>
9div
>
10<
ul>
11<
li v-for
="(item,index) in list"
:key
="index"
>}
li>
12ul
>
13div
>
14<
script
>
15new
vue(,
21methods:27}
28})
29script
>
30body
>
31html
>

2. 全域性元件和區域性元件怎麼寫？

全域性元件：在js中直接定義 vue.component('元件名『,)，然後在body中直接使用元件名，子元件可以傳參，元件中使用props去接收引數

:key="item.id"
:content="item.title"
>

區域性元件：第一步var 定義區域性元件，然後在vue中註冊區域性元件，也就是給區域性元件乙個名字，html中直接通過名字呼叫

1

html:
2<
todo-item
>
todo-item
>34
js:    
5//定義區域性元件
6var todoitem = 
9//在vue中註冊元件
10new vue(
15...
16 }）

3. 將1中的todolist例子拆分成元件模式,用的全域性元件，：key是v-bind的縮寫

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>...
head
>
4<
body
>
5<
div 
id="root"
>
6<
div>
7<
input 
v-model
="inputvalue"
/>
8<
button 
v-on:click
="submit"
>提交
button
>
9div
>
10<
ul>
1112
<
todo-item 
13v-for
="(item,index) in list"
14:key
="index"
15:content
="item"
16>
17todo-item
>
18ul
>
19div
>
20<
script
>
21//
全域性元件
22vue.component(
'todo-item',}
'25})26
newvue(,
32methods:37}
3839
})40
script
>
41body
>
42html
>

4：元件和vue例項的關係：

每乙個元件都是乙個vue例項，就是說元件中也可以包含data、methods、data、計算屬性computed....，同時每乙個vue例項都是乙個元件

5. 帶刪除功能的todolist元件

父子元件通訊使用$emit  和v-on，子元件使用$emit觸發，父元件在例項中v-on自定義事件監聽

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>...
head
>
4<
body
>
5<
div 
id="root"
>
6<
div>
7<
input 
v-model
="inputvalue"
/>
8<
button 
v-on:click
="submit"
>提交
button
>
9div
>
10<
ul>
1112
<
todo-item 
13v-for
="(item,index) in list"
14:key
="index"
15:content
="item"
16:index 
= "index"
17@delete
="handdelete"
18>
19todo-item
>
20ul
>
21div
>
22<
script
>
23//
全域性元件
24vue.component(
'todo-item
',}remove',
27methods:31}
32})
33new
vue(,
39methods:,
45//
刪除一條資料
46handdelete: 
function
(index)    49}
5051
})52
script
>
53body
>
54html
>

Vue入門 元件基礎

元件 專案的開發,就是乙個元件樹,元件可以進行復用。元件的名字 1.html標籤不區分大小寫 2.不能跟系統標籤重名 3.遵循 w3c 規範中的自定義元件名 字母全小寫且必須包含乙個連字元 4.支援駝峰命名.myheader,但是在引用的時候,需要使用my header的方式元件支援兩種定義方式 全...

Vue元件基礎

new vue 就可以認為是乙個大元件，但多個例項這樣太low了，vue為我們提供了component。1.全域性註冊的元件 要註冊乙個全域性元件，你可以使用vue.component tagname,options 例如 註冊 vue.component my component 建立根例項 va...

Vue元件基礎

vue.component button counter template you clicked me times.這裡的data必須是乙個function，不能是物件。因為如果是物件，多個元件引用的是相同的data。如果是function，那麼每次返回的都是不同的data物件，這樣元件之間引用的...