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

来源:https://www.cnblogs.com/leyili/archive/2019/12/25/vue-todo-app.html
-Advertisement-
Play Games

Vue.js 入門：從零開始做一個極簡 To Do 應用 寫作時間：2019 12 10版本信息：Vue.js 2.6.10官網文檔： "https://cn.vuejs.org/" 前言 學習 Vue 的最佳方式之一是「請立刻查閱 Vue.js 的 "官方文檔" 」，簡單看一下「基礎」部分，配合本 ...


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

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

前言 

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

image.png

在開始寫代碼之前，首先去 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 官網的基礎部分的「聲明式渲染」部分 ，我們可以創建如下代碼：

image.png

此時預覽 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>

需要註意的內容：

  1. 組件的代碼需要放到 new Vue 之前
  2. 定義組件的 data 時，data 必須是一個函數
  3. 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 class="todo-list">
        <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
        <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
        <div class="todo-item" v-for="todo in todos">
          <div class="title">{{todo.title}}</div>
          <div class="content">{{todo.content}}</div>
          <div class="button" v-show="!todo.done">點擊完成</div>
          <div class="button" 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>

需要註意的內容：

  1. 數據在 new Vue 的 data 中定義，需要傳遞給  TodoList 組件，使用 v-bind 指令，該代碼表示將 todos 變數傳遞給 TodoList 組件的 todos 屬性。
<div id="app">
  <todo-list v-bind:todos="todos"></todo-list>
</div>
  1. TodoList 組件定義 props 用來接收傳遞過來的 todos ，在組件的 template 中可以直接使用。這裡我們使用 v-for 來迴圈渲染數據。
Vue.component('todo-list', {
  // ... 省略 ...
  props: ['todos'],
    template:`
<div class="todo-list">
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <div class="todo-item" v-for="todo in todos">
    <div class="title">{{todo.title}}</div>
    <div class="content">{{todo.content}}</div>
    <div class="button" v-show="!todo.done">點擊完成</div>
    <div class="button" v-show="todo.done">已完成</div>
  </div>
</div>
`
})

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

image.png

TodoItem 組件

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

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

Vue.component('todo-list', {
  data: function() {
    return {}
  },
  props: ['todos'],
  template:`
<div class="todo-list">
  <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 class="todo-item" v-show="!isEditing">
    <div class="title">{{todo.title}}</div>
    <div class="content">{{todo.content}}</div>
    <div class="button edit" v-on:click="showForm">編輯 ✏</div>
    <div class="button" v-show="!todo.done">點擊完成</div>
    <div class="button" v-show="todo.done">已完成</div>
  </div>
  <div class="todo-item" v-show="isEditing">
    <div class="form">
      <div class="field">
        <label>Title</label>
        <input type="text" v-model="todo.title" />
      </div>
      <div class="field">
        <label>Content</label>
        <input type="text" v-model="todo.content" />
      </div>
      <button class="close" v-on:click="closeForm">保存並關閉編輯模式</button>
    </div>
  </div>
</div>
`,
  methods: {
    showForm: function() {
      this.isEditing = true
    },
    closeForm: function() {
      this.isEditing = false
    }
  }
})

添加的代碼做了這幾點：

  1. 在 TodoItem 組件中添加編輯按鈕，並添加一個 isEditing 的屬性用來區分是否是編輯狀態。
  2. 添加編輯模式時 TodoItem 組件的代碼
  3. 添加並綁定打開和關閉編輯模式的事件

刪除 Todo

Vue.component('todo-item', {
  // ... 省略 ...
  template: `
<div>
  <div class="todo-item" v-show="!isEditing">
    <div class="title">{{todo.title}}</div>
    <div class="content">{{todo.content}}</div>
    <div class="button edit" v-on:click="showForm">編輯 ✏</div>
    <div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
    <div class="button" v-show="!todo.done">點擊完成</div>
    <div class="button" 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 class="todo-list">
  <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 class="form" v-show="isAdding">
    <div class="field">
    <label>標題</label>
    <input type="text" v-model="todo.title" />
    </div>
    <div class="field">
    <label>內容</label>
    <input type="text" v-model="todo.content" />
    </div>
    <button class="close" v-on:click="saveForm">保存</button>
    <button class="close" 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 class="todo-list">
  <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 class="todo-item" v-show="!isEditing">
    <div class="title">{{todo.title}}</div>
    <div class="content">{{todo.content}}</div>
    <div class="button edit" v-on:click="showForm">編輯 ✏</div>
    <div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
    <div class="button" v-show="!todo.done" v-on:click="completeTodo(todo)">點擊完成</div>
    <div class="button" v-show="todo.done">已完成</div>
  </div>
  ......
`,
  methods: {
    // ... 省略 ...
    completeTodo(todo) {
      this.$emit('complete-todo', todo)
    }
  }
})

Vue.component('todo-list', {
  // ... 省略 ...
  template:`
<div class="todo-list">
  ......
  <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 class="form" v-show="isAdding">
          <div class="field">
            <label>標題</label>
            <input type="text" v-model="todo.title" />
          </div>
          <div class="field">
            <label>內容</label>
            <input type="text" v-model="todo.content" />
          </div>
          <button class="close" v-on:click="saveForm">保存</button>
          <button class="close" 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 class="todo-item" v-show="!isEditing">
            <div class="title">{{todo.title}}</div>
            <div class="content">{{todo.content}}</div>
            <div class="button edit" v-on:click="showForm">編輯 ✏</div>
            <div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
            <div class="button" v-show="!todo.done" v-on:click="completeTodo(todo)">點擊完成</div>
            <div class="button" v-show="todo.done">已完成</div>
          </div>
          <div class="todo-item" v-show="isEditing">
            <div class="form">
              <div class="field">
                <label>Title</label>
                <input type="text" v-model="todo.title" />
              </div>
              <div class="field">
                <label>Content</label>
                <input type="text" v-model="todo.content" />
              </div>
              <button class="close" 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 class="todo-list">
        <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>

（完）


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第一篇：前端知識之HTML內容
    HTTP協議介紹 什麼是HTTP協議 超文本傳輸協議，規定了瀏覽器與服務端之間數據傳輸的格式。 HTTP協議的四大特性 基於請求響應 一次請求對應一次響應 基於TCP/IP作用於應用層之上的協議 無狀態 不保留客戶端的狀態（如記錄用戶的登錄密碼和賬戶） 因此產生了cookie，session，tok ...
  • JS---元素隱藏的不同方式
    元素隱藏的不同方式 dispaly, visibility, opacity, height&border 為0 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> d ...
  • 7 個令人興奮的 JavaScript 新特性
    前言 一個ECMAScript標準的製作過程，包含了Stage 0到Stage 4五個階段，每個階段提交至下一階段都需要TC39審批通過。本文介紹這些新特性處於Stage 3或者Stage 4階段，這意味著應該很快在瀏覽器和其他引擎中支持這些特性。 一、類的私有變數 最新提案之一是在類中添加私有變數 ...
  • JS---案例：滾動條
    案例：滾動條 html框架分為4部分，最外面的div, 放文字的div, 裝滾動條的div層，以及滾動條本身放在一個div裡面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ...
  • JavaScript中用var和不用var的區別
    Javascript聲明變數的，雖然用var關鍵字聲明和不用關鍵字聲明，很多時候運行並沒有問題，但是這兩種方式還是有區別的。可以正常運行的代碼並不代表是合適的代碼。 varnum=1; 是在當前域中聲明變數。如果在方法中聲明，則為局部變數（localvariable），如果是在全局域中聲明，則為全局 ...
  • 學習Web前端開發時有哪些技術點
    現在學前端的人是越來越多，學習質量也是參差不齊。過來人的身份告訴你，如果你還沒有下定決心花時間去學習Web前端，那也可以先找些視頻學習下，Web前端開發有哪些常見技術點!接下來，就看看Web前端開發有哪些常見技術點! 1、你有哪些性能優化的方法? (1)減少http請求次數：CSSSprites,J ...
  • JavaScript如何實現字元串拼接操作
    實際應用中，目標字元串的生成可能需要多個數據的拼接。 由於應用頻繁，幾乎是所有編程語言都必須掌握的操作，當然每種語言具有各自特點。 本文將通過代碼實例詳細介紹一下JavaScript如何實現字元串拼接操作。 一.使用加號()拼接: 加號不但可以實現算數運算，也可以實現字元串拼接操作。 代碼實例如下: ...
  • 監測頁面載入的幾個函數的區別
    1 .window.onload //表示頁麵包含圖片等文件在內的所有元素都載入完成。 2 document.ready //函數只需對 DOM 樹的等待，而無需對圖像或外部資源載入的等待，從而執行起來更快。 3 document.onreadystatechange //當頁面載入狀態改變的時候執 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類