<template>
? <!-- <div id="nav">
? ? <router-link to="/">Home</router-link> |
? ? <router-link to="/about">About</router-link>
? </div>
? <router-view/> -->
? <div id="root">
? ? <div className="todo-container">
? ? ? <div className="todo-wrap">
? ? ? ? <Header :addtodo="addtodo"/>
? ? ? ? <List :todos="state.todos" />
? ? ? ? <Footer />
? ? ? </div>
? ? </div>
? </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import Footer from "./components/footer/footer.vue";
import Header from "./components/header/header.vue";
import List from "./components/list/list.vue";
//導入接口類型
import {todo} from "./type/todo"
export default defineComponent({
? components: { List, Header, Footer },
? setup() {
? ? const state = reactive({
? ? ? todos: [
? ? ? ? { id: 1, title: "吃飯", isture: true },
? ? ? ? { id: 2, title: "睡覺", isture: false },
? ? ? ? { id: 3, title: "打游戲", isture: false },
? ? ? ? { id: 4, title: "打代碼", isture: true },
? ? ? ],
? ? });
? ? //定義一個方法用來接收輸入框里面?zhèn)鱽淼臄?shù)據(jù)并把它加到state.todos里面面
? ? const addtodo=(todo:todo)=>{
? ? ? state.todos.unshift(todo)
? ? }
? ? return {
? ? ? state,
? ? ? addtodo
? ? };
? },
});
</script>

<style>
@import "./App.css";
</style>

<template>
? <div class="todo-header">
? ? <input
? ? ? type="text"
? ? ? placeholder="請輸入你的任務名稱，按回車鍵確認"
? ? ? v-model="title"
? ? ? @keyup.enter="add"
? ? />
? </div>
</template>

<style scoped>
@import "./header.css";
</style>

<script lang="ts">
import { defineComponent, ref } from "vue";
//導入接口類型
import { todo } from "../../type/todo";
export default defineComponent({
? props: {
? ? addtodo: {
? ? ? type: Function,
? ? ? required: true,
? ? },
? },
? setup(props) {
? ? const title = ref("");
? ? const add = () => {
? ? ? if (title.value == "") {
? ? ? ? alert("請輸入內(nèi)容");
? ? ? }
? ? ? const todo: todo = {
? ? ? ? id: Date.now(),
? ? ? ? title: title.value,
? ? ? ? isture: false,
? ? ? };
? ? ? props.addtodo(todo);
? ? ? title.value=''
? ? };
? ? return {
? ? ? add,
? ? ? title,
? ? };
? },
});
</script>

<template>
? ? <ul className="todo-main">
? ? ? ? ?<Listitem v-for="(todos,index) in todos" :key="todos.id" :todos='todos'></Listitem>
? ? </ul>
</template>

<style scoped>
@import"./list.css";
</style>

<script lang="ts">
import Listitem from "./listitem/listitem.vue"
import { defineComponent } from 'vue'
export default defineComponent({
? ? components:{
? ? ? ? Listitem
? ? },
? ? props:{
? ? ? ? todos:Object
? ? }
? ? ,
? ? setup() {
? ? ? ??
? ? },
})
</script>

<template>
?
? ? <li ?class="itli" >
? ? ? <label>
? ? ? ? <input type="checkbox" v-model="todos.isture" />
? ? ? ? <span>{{todos.title}}</span>
? ? ? </label>
? ? ? <button
? ? ? ? class="btn btn-danger"
? ? ? ? ? ? ?>刪除</button>
? ? </li>
?
</template>

<style scoped>
@import "./listitem.css";
</style>

<script lang="ts">
import { defineComponent } from "vue";
//導入接口類型
import {todo} from "../../../type/todo"
export default defineComponent({
? setup() {},
? props:{
//定義todos的類型是自己定義的todo接口
? ? todos:Object as ()=>todo
? }
});
</script>

<template>
? ? <div class="todo-footer">
? ? ? ? <label>
? ? ? ? ? <input type="checkbox" ? ? />
? ? ? ? </label>
? ? ? ? <span ?>
? ? ? ? ? <span >已完 </span> / 全部?
? ? ? ? </span>
? ? ? ? <button class="btn btn-danger" ?>清除已完成任務</button>
? ? ? </div>
</template>

<style scoped>
/* @import"./footer.css"; */
</style>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
? ? setup() {
? ? ? ??
? ? },
})
</script>