用vue元件封裝todolist

用vue元件封裝todolist

css

body 

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
footer a
@media screen and (max-device-width: 620px) }
@media screen and (min-width: 620px) }

js

var todolist=}-	

`,	props:["item","i"],
data()
},	methods:,
addto(),
toggle(),
editcomplete()	}}
var donelist=}
-	`,	
//editable是父元素上的
props:["item","i"],
data()
},	methods:,
deletecompletelist(),
toggle(),
editcomplete()	}}
const vm = new vue(,
methods:,
//加入待辦表後清空輸入框
clear(),
//將代辦事項加入到已完成列表
addcomplete(i),
//在待完成任務列表中移除任務
delitem(i),     
//在已完成列表中，將任務移到待辦事物
removecomplete(i),
//在已完成列表中移除該任務
deletecompletelist(i),
editcomplete(i,item),
editcompletes(i,item)
},components:
})

vue 封裝元件

一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...

Vue封裝分頁元件

使用vue做雙向繫結的時候，可能經常會用到分頁功能 接下來我們來封裝乙個分頁元件 先定義樣式檔案 pagination.css ul,li page bar page button disabled page bar li page bar li first child a page bar a p...

vue封裝導航元件

剛開始學習vue.js，寫了個頁面練手，在封裝頭部元件的時候一直出問題，研究了老半天。下面貼上 這是目錄結構，header元件內包含輪播圖，logo條，頭像和導航。其中輪播圖使用的是swiper元件。header.vue 元件 class swiper slide v for sliderimg i...