当前位置：移动技术网 > IT编程>开发语言>JavaScript > Vue.js 入门：从零开始做一个极简 To-Do 应用

Vue.js 入门：从零开始做一个极简 To-Do 应用

2019年12月26日 | 移动技术网IT编程 | 我要评论

vue.js 入门：从零开始做一个极简 to-do 应用

写作时间：2019-12-10
版本信息：vue.js 2.6.10
官网文档：

前言

学习 vue 的最佳方式之一是「请立刻查阅 vue.js 的」，简单看一下「基础」部分，配合本文食用更佳。

在开始写代码之前，首先去 bootcdn 上找一下目前最新版本完整版的 vue.js 的链接：，与压缩版（vue.min.js）不同，它（vue.js）包含完整的警告和调试模式。

为了尽可能地保持简单，本文不使用 vue cli 来构建项目，而是像用 jquery 开发那样，直接在 html 文件里引入 vue.js 文件。

如果文章中的代码有不明白的地方，我的建议是：直接抄代码，看效果，看文档，改代码，看效果，如此循环往复。

声明式渲染

了解一下 vue 官网的基础部分的「声明式渲染」部分，我们可以创建如下代码：

此时预览文件，会看到页面上出现 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 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>

需要注意的内容：

数据在 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 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 但是还没有写任何样式，现在打开预览是这样的：

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

添加的代码做了这几点：

在 todoitem 组件中添加编辑按钮，并添加一个 isediting 的属性用来区分是否是编辑状态。
添加编辑模式时 todoitem 组件的代码
添加并绑定打开和关闭编辑模式的事件

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

（完）

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS入门必备基础知识（适合小白）

JS入门必备基础知识（适合小白）一、JS是什么？1、JS简介2、JS的组成部分3、JS的基本特点4、JS的特性5... [阅读全文]
JavaScript学习书籍推荐（步步为营）

概述本文只要介绍，JavaScript学习的书籍。《JavaScript之美》《JavaScript设计模... [阅读全文]
javascript从入门到跑路-----小文的js学习笔记（19）------- js的垃圾回收机制

一、JS垃圾回收机制1》标记清除最常用的一种垃圾回收机制2》引用计数最不常用一种垃圾回收机制3》手动清除把不用的... [阅读全文]
Taro中多端使用Echarts

在RN中使用npm install native-echarts --save解决在安卓上不显示问题在node_... [阅读全文]
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景

为了让大家体验基于 Agora SDK 实现的互动直播场景，我们三年前开发了应用 Agora Live。近期，我... [阅读全文]
uniapp中使用sqlite模块1——打包SQLite

sqlite用法：使用SQLiteuniapp导入sqlite模块：第一步，使用HBuilderX：打开mani... [阅读全文]
安卓移动端固定在底部的按钮被软件盘顶上去的解决方案

问题描述当安卓手机访问按钮吸底的页面时，处于absolute（绝对）定位或fixed（固定）定位的按钮，会被键盘... [阅读全文]
关于Vue使用CDN引用ElementUI

关于Vue使用CDN引用ElementUI前言使用过程及问题解决前言最近自己做一个小网站，因为服务器性能不是很好... [阅读全文]
React Native搭建基础环境+Redux全局配置

备注：本基础环境建立在一位慕课大佬讲解的项目基础上，通过详细的阅读其源码，重新构建出来的，风格类似，写出来仅仅是... [阅读全文]
Nightmare Ⅱ HDU - 3085

HDU - 3085读题太难了，请看这位大神的翻译：大神的中文题意思路：这就是一道暴力BFS模拟啊！！最多再加点... [阅读全文]