vue3使用ts

<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>

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

<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 },       ],     });     //定义一个方法用来接收输入框里面传来的数据并把它加到state.todos里面面     const addtodo=(todo:todo)=>{       state.todos.unshift(todo)     }     return {       state,       addtodo     };   }, }); </script>

1 2 3

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

header.vue

1 2 3 4 5 6 7 8 9 10

<template>   <div class="todo-header">     <input       type="text"       placeholder="请输入你的任务名称，按回车键确认"       v-model="title"       @keyup.enter="add"     />   </div> </template>

1 2 3

<style scoped> @import "./header.css"; </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

<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("请输入内容");       }       const todo: todo = {         id: Date.now(),         title: title.value,         isture: false,       };       props.addtodo(todo);       title.value=''     };     return {       add,       title,     };   }, }); </script>

list.vue

1 2 3 4 5

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

1 2 3

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

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

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

listitem.vue

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

<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>

1 2 3

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

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

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

footer.vue

1 2 3 4 5 6 7 8 9 10 11

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

1 2 3

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

1 2 3 4 5 6 7 8

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

正在上传…重新上传取消正在上传…重新上传取消