Vue.js 入門：從零開始做一個極簡 To-Do 應用

寫作時間：2019-12-10
版本資訊：Vue.js 2.6.10
官網檔案：https://cn.vuejs.org/

前言

學習 Vue 的最佳方式之一是「請立刻查閱 Vue.js 的官方檔案」，簡單看一下「基礎」部分，配合本文食用更佳，

在開始寫代碼之前，首先去 BootCDN 上找一下目前最新版本完整版的 Vue.js 的鏈接：https://cdn.bootcss.com/vue/2.6.10/vue.js ，與壓縮版（vue.min.js）不同，它（vue.js）包含完整的警告和除錯模式，

為了盡可能地保持簡單，本文不使用 Vue CLI 來構建專案，而是像用 jQuery 開發那樣，直接在 HTML 檔案里引入 Vue.js 檔案，

如果文章中的代碼有不明白的地方，我的建議是：直接抄代碼，看效果，看檔案，改代碼，看效果，如此回圈往復，

宣告式渲染

了解一下 Vue 官網的基礎部分的「宣告式渲染」部分，我們可以創建如下代碼：

此時預覽 index.html 檔案，會看到頁面上出現 Hello, Vue.js! 的文字，

組件結構

我們把要做的 To-Do App 拆分成一個個小組件，目前先來一個組件 TodoList 和一個它的子組件 TodoItem ，通過熟悉官網上的「組件基礎」教程我們來繼續做下去，

TodoList 組件

先來做一下 TodoList 組件，我把代碼都粘貼過來，方便取用學習，
此文章之后的代碼都是在下面這段代碼的基礎上修改，到時我就只放修改的部分代碼了，有必要的時候我會把全部代碼貼出來，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js To-Do App</title>
</head>
<body>
  <div id="app">
    <todo-list></todo-list>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    Vue.component('todo-list', {
      data: function() {
        return {}
      },
      template:`
      <ul>
        <li>Todo A</li>
        <li>Todo B</li>
        <li>Todo C</li>
      </ul>
      `
    })

    new Vue({
      el: '#app',
      data: {}
    })
  </script>
</body>
</html>

需要注意的內容：

組件的代碼需要放到 new Vue 之前
定義組件的 data 時，data 必須是一個函式
template 中的代碼必須要有個外層容器包裹（最外層只能有一個元素）

改寫 TodoList 組件，添加所需資料：

<!DOCTYPE html>
<html lang="zh-hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js To-Do App</title>
</head>
<body>
  <div id="app">
    <todo-list v-bind:todos="todos"></todo-list>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    Vue.component('todo-list', {
      data: function() {
        return {}
      },
      props: ['todos'],
      template:`
      <div >
        <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
        <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
        <div  v-for="todo in todos">
          <div >{{todo.title}}</div>
          <div >{{todo.content}}</div>
          <div  v-show="!todo.done">點擊完成</div>
          <div  v-show="todo.done">已完成</div>
        </div>
      </div>
      `
    })

    new Vue({
      el: '#app',
      data: {
        todos: [
          {
            title: '待辦 1',
            content: '上課之前要抄一下同學的作業，',
            done: false
          },
          {
            title: '待辦 2',
            content: '課間和朋友去球場打籃球，',
            done: true
          },
          {
            title: '待辦 3',
            content: '英語課上故意調皮一下讓美麗的英語老師注意到然后提問我，',
            done: false
          },
          {
            title: '待辦 4',
            content: '放學后趕緊跑，絕對不能聽某些人的話：「放學后你給我等著」，',
            done: false
          }
        ]
      }
    })
  </script>
</body>
</html>

需要注意的內容：

資料在 new Vue 的 data 中定義，需要傳遞給 TodoList 組件，使用 v-bind 指令，該代碼表示將 todos 變數傳遞給 TodoList 組件的 todos 屬性，

<div id="app">
  <todo-list v-bind:todos="todos"></todo-list>
</div>

TodoList 組件定義 props 用來接收傳遞過來的 todos ，在組件的 template 中可以直接使用，這里我們使用 v-for 來回圈渲染資料，

Vue.component('todo-list', {
  // ... 省略 ...
  props: ['todos'],
	template:`
<div >
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <div  v-for="todo in todos">
    <div >{{todo.title}}</div>
    <div >{{todo.content}}</div>
    <div  v-show="!todo.done">點擊完成</div>
    <div  v-show="todo.done">已完成</div>
  </div>
</div>
`
})

雖然寫了給某些元素寫了 class 但是還沒有寫任何樣式，現在打開 index.html 預覽是這樣的：

TodoItem 組件

現在我們把 class 為 todo-item 的元素提取出來作為單獨的組件，除此之外我們什么也不做，預覽效果與剛才一致，

Vue.component('todo-item', {
  props: ['todo'],
  template: `
<div >
  <div >{{todo.title}}</div>
  <div >{{todo.content}}</div>
  <div  v-show="!todo.done">點擊完成</div>
  <div  v-show="todo.done">已完成</div>
</div>
`
})

Vue.component('todo-list', {
  data: function() {
    return {}
  },
  props: ['todos'],
  template:`
<div >
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <todo-item
    v-for="(todo, index) in todos" v-bind:key="index"
    v-bind:todo="todo">
  </todo-item>
</div>
`
})

接下來加入編輯的功能

Vue.component('todo-item', {
  props: ['todo'],
  data: function() {
    return {
      isEditing: false
    }
  },
  template: `
<div>
  <div  v-show="!isEditing">
    <div >{{todo.title}}</div>
    <div >{{todo.content}}</div>
    <div  v-on:click="showForm">編輯 ?</div>
    <div  v-show="!todo.done">點擊完成</div>
    <div  v-show="todo.done">已完成</div>
  </div>
  <div  v-show="isEditing">
    <div >
      <div >
        <label>Title</label>
        <input type="text" v-model="todo.title" />
      </div>
      <div >
        <label>Content</label>
        <input type="text" v-model="todo.content" />
      </div>
      <button  v-on:click="closeForm">保存并關閉編輯模式</button>
    </div>
  </div>
</div>
`,
  methods: {
    showForm: function() {
      this.isEditing = true
    },
    closeForm: function() {
      this.isEditing = false
    }
  }
})

添加的代碼做了這幾點：

在 TodoItem 組件中添加編輯按鈕，并添加一個 isEditing 的屬性用來區分是否是編輯狀態，
添加編輯模式時 TodoItem 組件的代碼
添加并系結打開和關閉編輯模式的事件

洗掉 Todo

Vue.component('todo-item', {
  // ... 省略 ...
  template: `
<div>
  <div  v-show="!isEditing">
    <div >{{todo.title}}</div>
    <div >{{todo.content}}</div>
    <div  v-on:click="showForm">編輯 ?</div>
    <div  v-on:click="deleteTodo(todo)">洗掉 ×××</div>
    <div  v-show="!todo.done">點擊完成</div>
    <div  v-show="todo.done">已完成</div>
  </div>
  // ... 省略 ...
</div>
`,
  methods: {
    // ... 省略 ...
    deleteTodo(todo) {
      this.$emit('delete-todo', todo)
    }
  },
})

在 TodoItem 組件中添加洗掉按鈕，并添加洗掉的方法，這個方法會向父組件 TodoList 發送一個 delete-todo 事件以及要洗掉的 todo 資料，

父組件 TodoList 中添加一個洗掉事件，并監聽來自子組件的 delete-todo 事件，

Vue.component('todo-list', {
  data: function() {
    return {}
  },
  props: ['todos'],
  template:`
<div >
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <todo-item
  v-for="(todo, index) in todos" v-bind:key="index"
  v-bind:todo="todo" v-on:delete-todo="deleteTodo"
  >
  </todo-item>
</div>
`,
  methods: {
    deleteTodo(todo) {
      const index = this.todos.indexOf(todo)
      this.todos.splice(index, 1)
    }
  },
})

新增 Todo

新建一個 AddTodo 組件，將組件添加到 TodoList 組件中，

Vue.component('add-todo', {
  data: function() {
    return {
      isAdding: false,
      todo: {
        title: '',
        content: '',
        done: false
      }
    }
  },
  template: `
<div>
  <div v-on:click="showForm">添加 +++</div>
  <div  v-show="isAdding">
    <div >
    <label>標題</label>
    <input type="text" v-model="todo.title" />
    </div>
    <div >
    <label>內容</label>
    <input type="text" v-model="todo.content" />
    </div>
    <button  v-on:click="saveForm">保存</button>
    <button  v-on:click="closeForm">取消</button>
  </div>
</div>
`,
  methods: {
    showForm() {
      this.isAdding = true
    },
    saveForm() {
      if (this.todo.title && this.todo.content) {
        this.$emit('add-todo', this.todo)
        this.closeForm()
      }
    },
    closeForm() {
      this.isAdding = false
      this.todo = {
        title: '',
        content: '',
        done: false
      }
    }
  }
})

Vue.component('todo-list', {
  // ... 省略 ...
  template:`
<div >
  <add-todo v-on:add-todo="addTodo"></add-todo>
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <todo-item
    v-for="(todo, index) in todos" v-bind:key="index"
    v-bind:todo="todo" v-on:delete-todo="deleteTodo"
  >
  </todo-item>
</div>
`,
  methods: {
    // ... 省略 ...
    addTodo(todo) {
      this.todos.push(todo)
    }
  },
})

AddTodo 組件默認只顯示一個添加按鈕，當點擊添加按鈕的時候顯示需要填寫的表單，填寫完成后點擊保存，將向父組件 TodoList 發送一個 add-todo 事件以及表單資訊，

父組件 TodoList 監聽 add-todo 事件并在事件觸發后向 todos 資料中新增一條由 AddTodo 組件發送的資料，

完成 Todo

TodoItem 組件中，點擊完成按鈕，發送 complete-todo 事件給父組件 TodoList ，

父組件 TodoList 監聽 complete-todo 事件并在事件觸發后從 todos 資料中要完成的那條資料標記為已完成，

Vue.component('todo-item', {
 // ... 省略 ...
  template: `
<div>
  <div  v-show="!isEditing">
    <div >{{todo.title}}</div>
    <div >{{todo.content}}</div>
    <div  v-on:click="showForm">編輯 ?</div>
    <div  v-on:click="deleteTodo(todo)">洗掉 ×××</div>
    <div  v-show="!todo.done" v-on:click="completeTodo(todo)">點擊完成</div>
    <div  v-show="todo.done">已完成</div>
  </div>
  ......
`,
  methods: {
    // ... 省略 ...
    completeTodo(todo) {
      this.$emit('complete-todo', todo)
    }
  }
})

Vue.component('todo-list', {
  // ... 省略 ...
  template:`
<div >
  ......
  <todo-item
    v-for="(todo, index) in todos" v-bind:key="index"
    v-bind:todo="todo"
    v-on:delete-todo="deleteTodo"
    v-on:complete-todo="completeTodo"
  >
  </todo-item>
</div>
`,
  methods: {
    // ... 省略 ...
    completeTodo(todo) {
      const index = this.todos.indexOf(todo)
      this.todos[index].done = true
    }
  }
})

至此，一個基本功能還算健全的 To-Do App 就完成了，

完整代碼

最終的完整代碼如下，可以直接拿走自己運行預覽一下，

<!DOCTYPE html>
<html lang="zh-hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js To-Do App</title>
</head>
<body>
  <div id="app">
    <todo-list v-bind:todos="todos"></todo-list>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    Vue.component('add-todo', {
      data: function() {
        return {
          isAdding: false,
          todo: {
            title: '',
            content: '',
            done: false
          }
        }
      },
      template: `
      <div>
        <div v-on:click="showForm">添加 +++</div>
        <div  v-show="isAdding">
          <div >
            <label>標題</label>
            <input type="text" v-model="todo.title" />
          </div>
          <div >
            <label>內容</label>
            <input type="text" v-model="todo.content" />
          </div>
          <button  v-on:click="saveForm">保存</button>
          <button  v-on:click="closeForm">取消</button>
        </div>
      </div>
      `,
      methods: {
        showForm() {
          this.isAdding = true
        },
        saveForm() {
          if (this.todo.title && this.todo.content) {
            this.$emit('add-todo', this.todo)
            this.closeForm()
          }
        },
        closeForm() {
          this.isAdding = false
          this.todo = {
            title: '',
            content: '',
            done: false
          }
        }
      },
    })

    Vue.component('todo-item', {
      props: ['todo'],
      data: function() {
        return {
          isEditing: false
        }
      },
      template: `
      <div>
          <div  v-show="!isEditing">
            <div >{{todo.title}}</div>
            <div >{{todo.content}}</div>
            <div  v-on:click="showForm">編輯 ?</div>
            <div  v-on:click="deleteTodo(todo)">洗掉 ×××</div>
            <div  v-show="!todo.done" v-on:click="completeTodo(todo)">點擊完成</div>
            <div  v-show="todo.done">已完成</div>
          </div>
          <div  v-show="isEditing">
            <div >
              <div >
                <label>Title</label>
                <input type="text" v-model="todo.title" />
              </div>
              <div >
                <label>Content</label>
                <input type="text" v-model="todo.content" />
              </div>
              <button  v-on:click="closeForm">保存并關閉編輯模式</button>
            </div>
          </div>
      </div>
      `,
      methods: {
        showForm: function() {
          this.isEditing = true
        },
        closeForm: function() {
          this.isEditing = false
        },
        deleteTodo(todo) {
          this.$emit('delete-todo', todo)
        },
        completeTodo(todo) {
          this.$emit('complete-todo', todo)
        }
      },
    })

    Vue.component('todo-list', {
      data: function() {
        return {}
      },
      props: ['todos'],
      template:`
      <div >
        <add-todo v-on:add-todo="addTodo"></add-todo>
        <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
        <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
        <todo-item
          v-for="(todo, index) in todos" v-bind:key="index"
          v-bind:todo="todo"
          v-on:delete-todo="deleteTodo"
          v-on:complete-todo="completeTodo"
        >
        </todo-item>
      </div>
      `,
      methods: {
        deleteTodo(todo) {
          const index = this.todos.indexOf(todo)
          this.todos.splice(index, 1)
        },
        addTodo(todo) {
          this.todos.push(todo)
        },
        completeTodo(todo) {
          const index = this.todos.indexOf(todo)
          this.todos[index].done = true
        }
      },
    })

    new Vue({
      el: '#app',
      data: {
        todos: [
          {
            title: '待辦 1',
            content: '上課之前要抄一下同學的作業，',
            done: false
          },
          {
            title: '待辦 2',
            content: '課間和朋友去球場打籃球，',
            done: true
          },
          {
            title: '待辦 3',
            content: '英語課上故意調皮一下讓美麗的英語老師注意到然后提問我，',
            done: false
          },
          {
            title: '待辦 4',
            content: '放學后趕緊跑，絕對不能聽某些人的話：「放學后你給我等著」，',
            done: false
          }
        ]
      }
    })
  </script>
</body>
</html>

（完）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/160544.html

標籤：JavaScript

上一篇：微信小程式原生框架（分享方法封裝）

下一篇：監測頁面加載的幾個函式的區別