使用 Vue 开发 todolist_vue编写一个todolist-CSDN博客

本文链接：https://blog.csdn.net/qq_41140138/article/details/114488811

本文档详述了如何使用Vue CLI创建一个TodoList应用。首先介绍了如何安装和初始化项目，然后逐步讲解了如何创建和完善TodoList组件，包括添加输入框、按钮、事件处理以及自定义todo-item组件。最后展示了应用的效果，包括动态效果和删除功能。通过这个教程，读者可以学习到Vue.js的基础组件开发和数据绑定知识。

摘要由CSDN通过智能技术生成

1. 创建工程目录

1.1 安装工具 vue-cli

使用下面的命令安装 vue-cli：

npm install -g vue-cli

如果此前没有安装 npm，可以先安装 npm 和 node

安装过程中可能会出现下面的问题：

npm does not support Node.js vxx.xx.xx
原因是 npm 和 nodejs 的版本不匹配，npm 版本太低，网上很多办法都不能解决该问题

solution:

node -v
npm -v
curl https://www.npmjs.com/install.sh | sudo sh

1.2 创建工程目录

在桌面打开终端，输入：

# 初始化工作目录
$ vue init webpack todolist

接着进入目录，使用 npm run start 或 npm run dev 运行项目：

$ cd my-project
$ npm run dev

此时，项目目录中的 package.json 中定义了 dev，执行命令后会启动 webpack dev server，可以打开 8080 端口查看结果： http://localhost:8080

1.3 目录结构

使用 VScode 打开目录：

目录结构可以参考：Project Structure

src 中存放了源代码，其中 main.js 是整个项目的入口文件
其中有一个 Vue 实例，挂载点为 "#app"，其中包含了一个局部组件，Vue 实例的模板为 </APP> 组件
App 组件定义在 App.vue 文件中

App.vue 代码结构：

template 部分 —— 组件的模板
script 部分 —— 组件的逻辑
style 部分 —— 组件的样式

App.vue 是单文件组件，包含了组件的所有内容

将 App.vue 改为：

<template>
  <div>
    TodoList
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

此时，main.js 中创建实例，挂载到 "#app"，根实例包含了组件 App，模板为 </App>，因此页面显示 TodoList

2. 完善 TodoList 组件

将 APP.vue 文件名更改为 TodoList.vue

2.1 模板

在 template 内创建 id 为 app 的 div 标签，在内部放入下面的代码：

TodoList 为 title
input 为输入框，将 value 属性双向绑定到 inputValue 变量
button 为添加 todo 按钮，按下后触发 handleSubmit 事件（向 todos 数组添加元素）
接着使用自定义组件 todo-item 实现对 todo 逐个渲染
todo-item 具有 content 属性，接收 todo 的内容，index 接收 todo 的序号
delete 事件由子组件 todo-item 触发，父组件可以检测事件

<template>
  <div id="#app">
    <p id="title">TodoList</p>
    <div>
      <input type="text" v-model="inputValue">
      <button @click="handleSubmit">add</button>
    </div>
    <ul>
      <todo-item v-for="(item, index) of todos"
      :key="index"
      :content="item"
      :index="index"
      @delete="handelDelete"></todo-item>
    </ul>
  </div>
</template>

2.2 组件创建

<script>
// 导入 todo-item 组件
import Todoitem from './components/Todoitem'

export default {
  // todos 存储了所有代办事项
  data: function () {
    return {
      inputValue: '',
      todos: []
    }
  },
  // 将 todo-item 包含进来
  components: {
    'todo-item': Todoitem
  },
  methods: {
    // 点击按钮后判断是否向 todos 添加 item
    handleSubmit: function () {
      for (let item of this.todos) {
        if (this.inputValue.trim() === item) {
          return
        }
      }
      this.todos.push(this.inputValue.trim())
      this.inputValue = ''
    },
    // 处理删除 item 事件
    handelDelete: function (index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

3. 创建 todo-item 组件

todo-item 包含下面的内容：

模板由 li 实现，同时能够接收 content 和 index 参数
在点击组件时触发删除事件，利用 $emit 抛出一个 delete 事件，返回被点击 item 的序号

<template>
  <li
  @click="handelClick"
  >{{content}}</li>
</template>

<script>
export default {
  // 添加组件的属性，并设置属性值的类型
  props: {
    content: String,
    index: Number
  },
  methods: {
    // 点击删除，抛出 delete 事件，返回 index
    handelClick: function () {
      if (confirm('Delete this item ?')) {
        this.$emit('delete', this.index)
      }
    }
  }
}
</script>