使用Vue3.0 beta4与Vite0.6.0制作一个todoList

# 安装

npx create-vite-app <project-name>

目录结构（README和Licence是自己加的）

可以看到vue版本是最新beta版4.0

{
  "name": "vite6",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0-beta.4"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-beta.4",
    "vite": "^0.6.0"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 使用

改造App.vue

<template>
  <div>
    <h1>Vue3配合Vite的TodoList</h1>
    <input placeholder="请输入代办事项" v-model="text" @keyup.enter="addOne"/>
    <button @click="addOne">提交</button>
    <p v-for="(list,i) in todoList" :key="i">
      <span>{{list.text}}</span>
      <button @click.prevent="deleteOne(list.text)">删除</button>
    </p>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from "vue";
export default {
  setup() {
    const text = ref("")
    const todo = reactive({
      list: [{text:'2112'},{text:'22332'}]
    });

    const todoList = computed(() => todo.list)

    const addOne = () => {
      if(text.value === ""){
        alert("请输入内容")
        return
      }
      const content = {"text":text.value}
      todo.list.push(content)
      text.value = ""
      console.log(todo.list);
    };
    const deleteOne = (listText) => {
      console.log("删除"+listText);
      todo.list = todo.list.filter(list => list.text !== listText)
      console.log(todo.list);
    };

    onMounted(() => {
      console.log("这是一个todoList");
    });
    return {
      text,
      todoList,
      addOne,
      deleteOne,
    };
  },
};
</script>

<style scoped>
h1 {
  color: #4fc08d;
}

h1,
p {
  font-family: Arial, Helvetica, sans-serif;
}
</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
60
61
62
63

在这个例子中我用到了Vue3.0的新的composition Api,在setup函数中定义各种方法，变量与生命周期钩子。ref方法接受一个值并返回一个响应式且可变的ref对象。reactive中取得一个对象并返回原始对象的响应式代理。ref对象在模板中访问时，从ref返回的引用将自动解包，因此模板中使用不需要.value，在setup中访问必须需要.value属性。