TypeScript基础篇一: HelloWorld TypeScript

TypeScript基础篇二: 使用TypeScript编写接口和类

TypeScript基础篇三: TypeScript的命名空间

TypeScrpit实战篇一：使用Vue-Cli脚手架创建Vue3项目

TypeScrpit实战篇二：动手创建一个TodoList组件

文章目录

一、项目重构

  • 在上篇文章中已经用脚手架创建了一个Vue3的基础项目，现在我们动手改建这个项目，删除一些不需要的页面，将主页面上增加一个TodoList的组件。
  2. 重建后的项目结构

    3. TypeScrpit实战篇二：动手创建一个TodoList组件_项目结构

  3. 程序入口App.vue
<template>
  <div id="nav"><router-link to="/">Todo</router-link></div>
  <router-view />
</template>

<style>#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}</style>
  • 路由定义
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;
  1. 主页面
<template>
  <div>
    <!-- 新增一个TodoList  -->
    <todo-list />
  </div>
</template>

<script lang="ts">import { defineComponent } from "vue";
// 新增一个TodoList
import TodoList from "@/components/TodoList.vue"; 

export default defineComponent({
  name: "Home",
  components: {
    TodoList
  }
});</script>

二、TodoList组件

  • 通过列表展示所有待办事项
  • 选择待办事项并展示已选择的事项列表
<template>
  <div>
    <ul>
      <li v-for="item in lists" :key="item.id">
        <input
          type="checkbox"
          @change="check()"
          :value="item.task"
          v-model="checkedValue"
        />
        <span>{{ item.task }}</span>
      </li>
    </ul>
    {{ checkedValue }}
  </div>
</template>

<script lang="ts">import { defineComponent } from "vue";

export default defineComponent({
  name: "TodoList",
  props: {},
  data() {
    return {
      lists: [
        { id: 0, task: "读书" },
        { id: 1, task: "写字" },
        { id: 2, task: "洗澡" },
        { id: 3, task: "睡觉" }
      ],
      checkedValue: []
    };
  },
  methods: {
    check(): void {
      console.log(this.checkedValue);
    }
  }
});</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>li {
  list-style-type: none;
}</style>

TypeScrpit实战篇二：动手创建一个TodoList组件_sed_02