使用元件改造TodoLIst

2021-08-26 17:45:41 字數 339 閱讀 3664

首先我們定義了乙個component乙個全域性元件,名字是todoitem,所以我們可以直接在html中使用我們的元件,然後通過v-for來決定到底要輸出多少個todoitem這個元件,同時將每乙個v-for的item內容通過v-bind儲存在content中,且傳遞給todo-item這個元件,然後通過props來進行接收,再在模板template中使用content(最後todo-item標籤會被component模板中的標籤templeate所替換)

剛才是全域性元件的方法,現在講一下區域性元件的方法

用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...

react元件化todolist例項

首先建立react的腳手架 具體建立步驟自己查 首先建立乙個todelist 在src下建立乙個components資料夾 裡面建立乙個todo的資料夾 todo裡面建立乙個index.js檔案這裡是父元件 在裡面寫 此處只是做乙個小例子演示下react的元件化 元件化的理解 1.元件的封裝 檢視 ...

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 butto...