這篇文章主要介紹了如何使用Vue實現(xiàn)todolist，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比高邑網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式高邑網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋高邑地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

一、使用vue-cli腳手架快速搭建一個框架

利用vue-cli來自動生成我們項目的前端目錄及文件，方法：

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

這樣我們的一個基于webpack的vue項目目錄就可以快速構建好了。

目錄如下：

二、完成一個簡單的todolist

接下來就看一下webpack.base.conf文件，這是核心文件，必須執(zhí)行的文件，這里可以看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。在main.js中可以看到創(chuàng)建了一個vue實例，并加載了模板組件App.vue，所以我們的todo list代碼就可以寫在App.vue中。

簡單的todolist我們可以完成這幾個功能：

1、顯示todo列表

2、判斷列表任務完成狀態(tài)，若完成則添加相應的樣式

3、在輸入框中動態(tài)添加todo項目，點擊回車在列表中顯示

4、點擊相應的項目轉換狀態(tài)

首先我們完成顯示列表的功能：

效果

export后面跟的對象，會作為 new Vue()的參數(shù)，來創(chuàng)建一個Vue的組件，并導出。

判斷任務的完成狀態(tài)，完成則添加text-decoration樣式

官方文檔中我們可以看到：

綁定class樣式

如果v-bind中class后是一個對象的話，鍵代表添加的class的名稱，value值代表一個布爾值，用來控制這個class屬性的有無。
所以我們就可以這樣：

效果

在輸入框中填寫item，點擊回車完成添加列表并顯示同時清空input框內容

用到的知識：

監(jiān)聽回車

表單控件監(jiān)聽

點擊內容進行狀態(tài)轉換

在li標簽上綁定一個click事件，點擊時修改isFinished

//添加代碼
 
    {{item.label}}
 

methods: {
 finish (item) {
    item.isFinished = !item.isFinished
  }
}

這樣一個簡單的todolist的基本功能已經(jīng)完成。

動圖效果

小彩蛋：linux下制作GIF動圖

上網(wǎng)查找了很多辦法，很多不適合linux平臺，發(fā)現(xiàn)這個辦法不錯:

下載SimpleScreenRecoder軟件：

三條命令：

sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder
sudo apt-get update
sudo apt-get install simplescreenrecorder

安裝好后你可以選擇錄制區(qū)域

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用Vue實現(xiàn)todolist”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!