Vue完成TodoList案例

寫一個簡單的TodoList的更實用（文末有彩蛋）。

一，使用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文件，這是核心文件，必須執行的文件，這里可以看到入口和輸出，這就是入口和輸出路徑，在入口處看到了./src/main.js， Main.js .v ue ve，並加載了.v .v App.vue，的確列表.v .v .v .v .v App.vue的

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

1、顯示todo列表
2、判斷列表任務完成狀態，若完成則添加相應的樣式
3、在輸入框中動態添加todo項目，點擊回車在列表中顯示
4、點擊相應的項目轉換狀態

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

<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（）的參數，來創建一個Vue的組件，並導出。

• 判斷任務的完成狀態，完成則添加文字修飾樣式
  官方文檔中我們可以看到：

  
  
   

  

  綁定類樣式
  
  

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

<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>

 

效果

• 在輸入框中填寫項，回車點擊完成添加列表並顯示同時清空輸入框內容
  用到的知識：

  
  
   

  

  監聽回車
  
  
   

  

  表單控件監聽

<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>

 

• 進行內容點擊狀態轉換
  在李標簽上綁定一個單擊事件，點擊時修改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
   }
}

 

這樣一個簡單的TodoList的的基本功能已經完成。

 

動圖效果

 

 

.