采用vue來(lái)構(gòu)建一個(gè)簡(jiǎn)單的todolist demo
1.首先我們先在本地構(gòu)建一個(gè)todolist
在命令行輸入 vue create todolist
cd todolist
2.看一下我們目前生成的文件目錄
3.我們首先從main.js開(kāi)始做
el是vue實(shí)例化的對(duì)象战虏，提供一個(gè)已存在的的DOM元素作為Vue實(shí)例上的掛載點(diǎn)
4.App.vue
App.vue分為三個(gè)部分 template script css
首先我們來(lái)寫(xiě)script中的data
data是Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter隙袁，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化匆帚。
之后我們?cè)趖emplate里面加入一個(gè)h1標(biāo)簽熙兔，使用data，并且返回title，令其在頁(yè)面之中顯示
這時(shí)頁(yè)面效果如圖
5.接下來(lái)攒至，我們添加列表來(lái)記錄代辦事項(xiàng)
采用v-for來(lái)生成來(lái)生成列表項(xiàng)嘶居，此時(shí)在data里新增items數(shù)組數(shù)據(jù)
采用v-bind綁定class屬性罪帖，當(dāng)items數(shù)組中的isFinshed為true時(shí)，則class為finished
簡(jiǎn)單修飾一下邮屁，若class為finished整袁，則待辦事項(xiàng)為黑色
6.再用v-on綁定一個(gè)點(diǎn)擊事件，記錄是否完成佑吝，點(diǎn)擊事件的方法寫(xiě)在methods里面
7.最后我們添加一個(gè)輸入框坐昙，來(lái)動(dòng)態(tài)輸入，使用v-model進(jìn)行雙向綁定
在data中迹蛤，items默認(rèn)為空民珍，newItem也為空，輸入內(nèi)容回車后items中push一條內(nèi)容盗飒，其中的label為輸入框輸入的內(nèi)容嚷量，isFinished默認(rèn)為false，表示不帶下劃線逆趣，并且最后將輸入框清空蝶溶。
最終效果
