如何使用Vue實(shí)現(xiàn)todolist

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

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

利用vue-cli來自動(dòng)生成我們項(xiàng)目的前端目錄及文件，方法：

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

這樣我們的一個(gè)基于webpack的vue項(xiàng)目目錄就可以快速構(gòu)建好了。

目錄如下：

二、完成一個(gè)簡單的todolist

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

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

1、顯示todo列表

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

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

4、點(diǎn)擊相應(yīng)的項(xiàng)目轉(zhuǎn)換狀態(tài)

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

<template>
 <div id="app">
  <input/>
  <ul>
   <li v-for="item in items">
    {{item.label}}
   </li>
  </ul>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    items: [
     {
      label: 'read books',
      isFinished: false
     },
     {
      label: 'eat dinner',
      isFinished: true
     }
    ]
   }
  }
 }
</script>

效果

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

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

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

綁定class樣式

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

<template>
 <div id="app">
  <input/>
  <ul>
   <li v-for="item in items" v-bind:class={finished:item.isFinished}>
    {{item.label}}
   </li>
  </ul>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    items: [
     {
      label: 'read books',
      isFinished: false
     },
     {
      label: 'eat dinner',
      isFinished: true
     }
    ]
   }
  }
 }
</script>

<style>
 .finished {
  text-decoration: line-through;
 }
</style>

效果

在輸入框中填寫item，點(diǎn)擊回車完成添加列表并顯示同時(shí)清空input框內(nèi)容

用到的知識：

監(jiān)聽回車

表單控件監(jiān)聽

<template>
 <div id="app">
  <input v-on:keyup.enter="addNewItem" v-model="newItem"/>
  <ul>
   <li v-for="item in items" v-bind:class={finished:item.isFinished}>
    {{item.label}}
   </li>
  </ul>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    items: [
     {
      label: 'read books',
      isFinished: false
     },
     {
      label: 'eat dinner',
      isFinished: true
     }
    ],
    newItem: ''
   }
  },
  methods: {
   addNewItem () {
    this.items.push({label: this.newItem,isFinished: false})
    this.newItem = ''  //清空輸入框
   } 
  }
 }
</script>

<style>
 .finished {
  text-decoration: line-through;
 }
</style>

點(diǎn)擊內(nèi)容進(jìn)行狀態(tài)轉(zhuǎn)換

在li標(biāo)簽上綁定一個(gè)click事件，點(diǎn)擊時(shí)修改isFinished

//添加代碼
 <li v-for="item in items" v-bind:class={finished:item.isFinished} v-on:click="finish(item)">
    {{item.label}}
 </li>

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

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

動(dòng)圖效果

小彩蛋：linux下制作GIF動(dòng)圖

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

下載SimpleScreenRecoder軟件：

三條命令：

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用Vue實(shí)現(xiàn)todolist”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!