vue小项目todolist，20分钟复习Vue基础知识点_vue简单复习项目

vite项目：todolist 一小时复习Vue基础知识点

项目介绍：

这个项目虽然小，自己写的代码可能就100多行，但是几乎涵盖了所有的vue基础知识点，对于初学Vue的同学们来说，是个不可多得的好项目。下面我来手把手带着大家做下这个项目。

项目初始化：

首先打开vs code，点击上方terminal 然后继续点击new terminal

点击之后，下面会跳出命令行，这个命令行是集成在vscode里面的，这样我们以后每一次调试就不用单独打开命令行了就很方便

我们在上面的命令行里面输入几个命令：

1. 初始化项目：npm init vite-app todolist
2. 进入项目：cd todolist
3. 安装依赖包：npm i

做完这三步，一个基于vite项目初始化就已经算完成了。

我们输入下面命令，即可运行项目：

npm run dev

打开网页后，显示的就是这个官方写的默认代码。

导入bootstrap用于美化界面

1. bootstrap文件，可以直接到官网下载，这是下载链接：https://v4.bootcss.com/docs/getting-started/download/
2. 把下载bootsrap文件放在assets文件夹里面。如图：

1. 之后，我们在main.js中导入bootstrap，如图：

做完上面三步，bootstrap就导入成功了。

编写todoList组件

1. 在components文件夹中新建todoList.vue

A. 之后在todoList.vue输入以下代码：

<template>
  <ul class="list-group">
    <li
      class="list-group-item d-flex justify-content-between align-items-center"
      v-for="item in todolist"
      :key="item.id"
    >
      <!-- 复选框 -->
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          value=""
          :id="item.id"
          v-model="item.isCompleted"
        />
        <label
          class="form-check-label"
          :for="item.id"
          :class="item.isCompleted ? 'delete' : ''"
        >
          {{ item.task }}
        </label>
      </div>
      <span class="badge badge-primary badge-pill" v-if="item.isCompleted"
        >已完成</span
      >
      <span class="badge badge-warning badge-pill" v-else>未完成</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "todoList",
  props: {
    todolist: {
      type: Array,
      required: true,
      default: [],
    },
  },
};
</script>

<style scoped>
.list-group {
  width: 500px;
  margin: 0 auto;
}
.delete {
  text-decoration: line-through;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

B. 在App.vue中导入，注册并使用，如图：

里面的具体细节，就不多说了，不懂的可以评论区留言问我，也可以加我v:zyjava2020 我会把源码包发给你

todoinput和todobutton的导入、注册和使用，和todolist组件一样，在这里就不多说了，我贴一下代码，有什么不懂的，都可以在评论区留言。

todoInput.vue

<template>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">新建任务</span>
    </div>
    <input
      type="text"
      class="form-control"
      placeholder="请输入任务"
      aria-label="Username"
      aria-describedby="basic-addon1"
      v-model="taskname"
    />
    <button class="btn-primary" @click="onsubmit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskname: "",
    };
  },
  emits: ["addTask"],
  methods: {
    onsubmit() {
      this.$emit("addTask", this.taskname);
      this.taskname = "";
    },
  },
};
</script>

<style scoped>
.input-group {
  width: 500px;
  margin: 0 auto;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

todoButton.vue

<template>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button
      type="button"
      class="btn"
      :class="active === 0 ? 'btn-primary' : 'btn-secondary'"
      @click="changeActive(0)"
    >
      全部
    </button>
    <button
      type="button"
      class="btn"
      :class="active === 1 ? 'btn-primary' : 'btn-secondary'"
      @click="changeActive(1)"
    >
      已完成
    </button>
    <button
      type="button"
      class="btn"
      :class="active === 2 ? 'btn-primary' : 'btn-secondary'"
      @click="changeActive(2)"
    >
      未完成
    </button>
  </div>
</template>

<script>
export default {
  name: "todoButton",
  data() {
    return {
      active: 0,
    };
  },
  emits: ["changeActive"],
  methods: {
    changeActive(index) {
      this.active = index;
      this.$emit("changeActive", index);
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

这个是App.vue根组件

<template>
  <div id="app">
    <h1>根组件</h1>
    <todoInput @addTask="addTask"></todoInput>
    <todoList :todolist="todoList"></todoList>
    <todoButton @changeActive="changeActive"></todoButton>
  </div>
</template>

<script>
import todoList from "./components/todoList.vue";
import todoButton from "./components/todoButton.vue";
import todoInput from "./components/todoInput.vue";
export default {
  name: "App",
  data() {
    return {
      todoList: [
        { id: 1, task: "吃饭", isCompleted: true },
        { id: 2, task: "睡觉", isCompleted: false },
        { id: 3, task: "打豆豆", isCompleted: false },
      ],
      active: 0,
    };
  },
  computed: {
    todoList() {
      if (this.active === 0) {
        return this.todoList;
      } else if (this.active === 1) {
        return this.todoList.filter((item) => item.isCompleted);
      } else {
        return this.todoList.filter((item) => !item.isCompleted);
      }
    },
  },
  methods: {
    changeActive(active) {
      this.active = active;
      console.log(this.active);
    },
    addTask(taskname) {
      this.todoList.push({
        id: this.todoList.length + 1,
        task: taskname,
        isCompleted: false,
      });
    },
  },
  components: {
    todoList,
    todoButton,
    todoInput,
  },
};
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

下面这个链接是这个教程的视频版

) {
this.todoList.push({
id: this.todoList.length + 1,
task: taskname,
isCompleted: false,
});
},
},
components: {
todoList,
todoButton,
todoInput,
},
};

## 下面这个链接是这个教程的视频版

https://www.bilibili.com/video/BV1fs4y1r7P3
1
2
3
4