專案背景
這個專案是跟著B站做的，任務目標是完成一個具備基本記事能力的記事本，
基本記事能力：新增、洗掉、清空，
專案的完整代碼：https://www.cnblogs.com/technicist/p/13357766.html
功能實作
新增
通過v-for生成串列結構
<li v-for="(item,index) in list">
add:function(){this.list.push(this.inputValue);},
通過v-model獲取用戶資料
data:{
list:["寫代碼","吃代碼","睡覺覺"],
inputValue:"好好學習，天天向上"
},
回車，新增資料（@keyup.enter）
<input v-model="inputValue" @keyup.enter="add"
autofocus="autofocus" autocomplete="off"
placeholder="請輸入任務"
/>
洗掉
<ul >
<li v-for="(item,index) in list">
<div >
<span >{{ index+1 }}.</span>
<label>{{item}}</label>
<button @click="remove(index)">×</button>
</div>
</li>
</ul>
remove:function(index){this.list.splice(index,1); <!--使用splice獲取index，每次洗掉一個-->}
清空
<button @click="clear" v-show="list.length!=0">Clear</button>
clear:function(){this.list=[]; <!--清空直接把list變成空陣列即可-->}
專案感想
首先是折回頭繼續學JS，把基礎打扎實，
其次是做專案的時候先進行步驟拆分，再動手實作，
接著是注意一些比較巧妙的應用，比如涉及到陣列要進行隱藏，就考慮用長度空，
最后是一點關于使用vue的感想：這個框架依賴資料驅動，和之前學jquery感覺不太相同，使用vue操作確實非常簡便，
資料驅動：當資料發生變化的時候，用戶界面發生相應的變化，開發者不需要手動去修改dom，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/258009.html
標籤：JavaScript
上一篇：實作一個簡單的靜態博客生成器