【Vue.js學習筆記】簡易版Todolist

本篇將做出一個Todolist入門款，需要懂得一點組件的基礎。如果對組件還不熟悉可以參考官方的組件基礎文檔。

首先，我們的Todolist預計要有以下功能：

1.新增事項
2.刪除事項

著重在功能實現了…就無視外觀吧。

新增事項

我們可以用form來包裹，在input 綁定 v-model = "newTodoText"，這個 newTodoText 預設為空值：

<!--新增項目-->
<form v-on:submit.prevent="addNewTodo">
<p>
<h3>新增待辦事項</h3>
</p>
<input id="newtodo" v-model="newTodoText" placeholder="例如：買文具">
<button>新增</button>
</form>

項目管理

用ul li列表來呈現事項，is="todo-item" 等同＜todo-item＞；v-for="(todo,index) in todos" 代表從 todos 陣列中取得值以及索引；設key為todo.id，title設為todo.title，v-on加上remove="todos.splice(index,1)"。

<!--項目管理-->
<ul>
<li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
</ul>

2.2.0+ 的版本裡，在組件上使用 v-for 時，必須要有 key，這裡是設key為todo.id。

創建組件實現刪除按鈕

使用Vue.component創建一個全域 todo-item 組件，設定template為：

<li>{{ title }}<button v-on:click="$emit('remove')">Remove</button></li>

這個模板可以在每條事項右方加上Remove的按鈕。

$emit('remove') 與項目管理區塊的li標籤中的 v-on:remove="todos.splice(index, 1)" 做掛勾，當點擊第n個事項的Remove按鈕時會在todos陣列中刪除索引為n的項目。

註：$emit() 由內向外傳出，特性為事件觸發才更新資料，屬於事件類型。

Vue.component('todo-item', {
   template: '\<li>\{{ title }}\
                <button v-on:click="$emit(\'remove\')">Remove</button>\
              </li>\',
   props: ['title']
})

創建Vue實例

在data中新增一個todos陣列，key值有id與title，並且給定nextTodoId為4 (代表使用者手動新增的事項起始id為4)。

新增方法addNewTodo()，該方法可將使用者輸入的事項push進todos陣列中，id則會根據nextTodoId自動遞增；最後在給定newTodoText值為空，即可實現新增事項後輸入框自動清空。

new Vue({
   el: '#todo-list',
   data: {
     newTodoText: '',
     todos: [{
        id: '1',
        title: '洗衣服'
      }, {
        id: '2',
        title: '洗碗'
      }, {
        id: '3',
        title: '煮飯'
      }],
     nextTodoId: 4
    },
    methods: {
      addNewTodo: function() {
         this.todos.push({
            id: this.nextTodoId++,
            title: this.newTodoText
         })
         this.newTodoText = ''
      }
    }
})

完整程式碼

html

<!--新增項目-->
   <form v-on:submit.prevent="addNewTodo">
     <p>
     <h3>新增待辦事項</h3>
     </p>
     <input id="newtodo" v-model="newTodoText" placeholder="例如：買文具">
     <button class="button"><i class="fa fa-plus"></i> 新增</button>
   </form>
<!--管理項目-->
   <ul>
     <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
   </ul>

script

<script>
   Vue.component('todo-item', {
      template: '\<li>\{{ title }}\<button v-on:click="$emit(\'remove\')">Remove</button>\</li>\',
      props: ['title']
   })
    new Vue({
      el: '#todo-list',
      data: {
         newTodoText: '',
         todos: [{
           id: '1',
           title: '洗衣服'
         }, {
           id: '2',
           title: '洗碗'
         }, {
           id: '3',
           title: '煮飯'
         }],
         nextTodoId: 4
         },
       methods: {
         addNewTodo: function() {
           this.todos.push({
              id: this.nextTodoId++,
              title: this.newTodoText
           })
           this.newTodoText = ''
         }
       }
})
</script>

閱讀量: 29

新增事項

項目管理

創建組件實現刪除按鈕

創建Vue實例

完整程式碼

相關文章: