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

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

首先,我們的Todolist預計要有以下功能:

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

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

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

新增事項

我們可以用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>
4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 【Vue.js學習筆記】簡易版Todolist
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論