? 分享一個(gè)用vue做的一個(gè)案例鹿寻，這個(gè)案例結(jié)合了大多的vue的入門知識(shí)娱挨，包括有點(diǎn)擊事件渐尿，數(shù)據(jù)雙向綁定醉途，v-for獲取數(shù)據(jù)列表,v-if 頁(yè)面元素顯示方法等等。
學(xué)習(xí)這個(gè)案例也是能很好的幫助vue的學(xué)習(xí)者掌握一個(gè)很好的底層基礎(chǔ)砖茸。然后就是在寫vue知識(shí)的時(shí)候還順便用了bootstrap來(lái)快速布局隘擎。
然后效果圖圖下：
首先在效果上：
? 1.? 數(shù)據(jù)列表： 數(shù)據(jù)列表用于顯示當(dāng)前的記事內(nèi)容， 在文本框?qū)懴掠浭卤镜膬?nèi)容之后凉夯，點(diǎn)擊確認(rèn)或者按下回車鍵之后數(shù)據(jù)列表就會(huì)顯示出你剛剛編輯好的結(jié)果货葬。
? 2.? 記事時(shí)間： 用vue的new Date（）方法自動(dòng)生成當(dāng)前系統(tǒng)時(shí)間，因?yàn)関ue生成的時(shí)間是國(guó)際時(shí)間劲够，（例如生成：Wed Apr 15 2020 15:34:26 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)震桶，所以我這里用到了filter過(guò)濾器把時(shí)間的格式給格式化了。
? 3. 刪除按鈕： 點(diǎn)擊刪除之后征绎，vue就會(huì)把當(dāng)前的這一個(gè)列表給刪除掉蹲姐。
? 4.全部刪除按鈕：? 點(diǎn)擊clear按鈕之后，vue就hi把當(dāng)前全部的數(shù)據(jù)列表刪除。
? 5. 記事記錄： 在寫記事本的內(nèi)容時(shí)柴墩，如果你當(dāng)前一共寫了3條記錄忙厌，vue就會(huì)顯示3個(gè)記事記錄，當(dāng)然江咳，這個(gè)數(shù)值是動(dòng)態(tài)傳輸?shù)姆昃唬鼤?huì)根據(jù)數(shù)據(jù)的多少個(gè)記錄顯示。
在全局效果上歼指，點(diǎn)擊單個(gè)數(shù)據(jù)列表的刪除按鈕之后爹土，數(shù)據(jù)列表會(huì)發(fā)生相應(yīng)變化。并且記事記錄踩身，順序列表也會(huì)發(fā)生變化着饥，具體效果如圖：
再之后。我把代碼發(fā)出來(lái)惰赋，（大家代碼僅作參考學(xué)習(xí)作用）
最后再大致概括下vue的知識(shí)點(diǎn)的實(shí)際應(yīng)用：
?? 1.? 做好布局之后宰掉，步驟a:? 先在data里自定義兩個(gè)三個(gè)的數(shù)據(jù)，這個(gè)數(shù)據(jù)只是為了前期觀看赁濒，不寫也是可以的轨奄。步驟b： 在第60行代碼上，用v-for 指令在把data的數(shù)據(jù)給加載到拒炎，注意v-for 除了定義item內(nèi)容外還可以應(yīng)用index挪拟，因?yàn)閕ndex可以把數(shù)據(jù)的下標(biāo)給顯示出來(lái)，再因?yàn)橄卤韽?開(kāi)始击你，所以我在給index加上1（62行代碼）玉组。
? 2.? 在時(shí)間上，vue的new Date（）方法自動(dòng)生成當(dāng)前系統(tǒng)時(shí)間丁侄，因?yàn)関ue生成的時(shí)間是國(guó)際時(shí)間惯雳，（例如生成：Wed Apr 15 2020 15:34:26 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)，所以我這里用到了filter過(guò)濾器把時(shí)間的格式給格式化了鸿摇。因?yàn)闀r(shí)間函數(shù)考慮可能多次用到石景，所以用的是全局過(guò)濾器。具體的使用是首先用 new Date() 方法給獲取到拙吉，然后再就是獲取時(shí)間的 年月日等時(shí)間就行了潮孽。（具體代碼顯示在91--105 行代碼），在應(yīng)用時(shí)間時(shí)筷黔，記得給時(shí)間先定義一個(gè)當(dāng)前時(shí)間再用filter過(guò)濾器格式時(shí)間（115行代碼）往史。
? 3. 再數(shù)據(jù)的雙向綁定上，給input輸入框綁定 v-model()指令（53行代碼）佛舱，再在data綁定v-model的一個(gè)空值（114行代碼）
?4.當(dāng)數(shù)據(jù)全部清空后椎例，因?yàn)榇藭r(shí)數(shù)據(jù)為空揽乱，所以在用戶體驗(yàn)上 就用到了 v-if 指令把clear按鈕給消失了（代碼75行），當(dāng)數(shù)據(jù)列表有一條或者更多時(shí)它就會(huì)重新顯示出來(lái)了粟矿。
? 5. 在methods方法的定義上， 定義add? 添加數(shù)據(jù)方法（代碼120行--128行）损拢，remove 刪除單個(gè)數(shù)據(jù)列表的方法（代碼130行--132行）陌粹，clear 全部刪除數(shù)據(jù)列表方法（代碼134行--136行）。方法寫好之后分別在按鈕的行內(nèi)嵌套使用即可福压。c例如clear方法的使用在 代碼75行
? 6. 在最后掏秩，為了提升用戶體驗(yàn)感，輸入完記事內(nèi)容之后需要把input的value值給清空荆姆，因?yàn)閕nput輸入框已經(jīng)用v-model數(shù)據(jù)雙向綁定了蒙幻，所以我們把這個(gè)v-model的值給賦予空值即可。（125行代碼）
?最后這么一個(gè)vue的案例也就完成了胆筒，當(dāng)然一些 v-bind指令這里是沒(méi)用上的邮破，而v-show指令的話因?yàn)橛昧藇-if所以也沒(méi)用著。
這里再分享下學(xué)到的一個(gè)關(guān)于 v-show 和 v-if 知識(shí)點(diǎn):
v-if指令:? 指令直接操縱DOM元素也就是直接改變html元素仆救，實(shí)際應(yīng)用時(shí)抒和，頻繁操作顯示與隱藏使用v-show指令，反之用v-if,因?yàn)槭褂胿-if操縱DOM對(duì)性能的消耗比較大彤蔽，使用v-show操縱的為display的none與block屬性摧莽，這個(gè)對(duì)性能的消耗比較少。
最后顿痪，分享完畢镊辕，謝謝！
