vue3中如何使用ts
如何使用ts
在創(chuàng)建vue腳手架的時(shí)候吧typescript選上
app.vue
<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"; //導(dǎo)入接口類型 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 }, ? ? ? ], ? ? }); ? ? //定義一個(gè)方法用來接收輸入框里面?zhèn)鱽淼臄?shù)據(jù)并把它加到state.todos里面面 ? ? const addtodo=(todo:todo)=>{ ? ? ? state.todos.unshift(todo) ? ? } ? ? return { ? ? ? state, ? ? ? addtodo ? ? }; ? }, }); </script>
<style> @import "./App.css"; </style>
header.vue
<template> ? <div class="todo-header"> ? ? <input ? ? ? type="text" ? ? ? placeholder="請(qǐng)輸入你的任務(wù)名稱,按回車鍵確認(rèn)" ? ? ? v-model="title" ? ? ? @keyup.enter="add" ? ? /> ? </div> </template>
<style scoped> @import "./header.css"; </style>
<script lang="ts"> import { defineComponent, ref } from "vue"; //導(dǎo)入接口類型 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("請(qǐng)輸入內(nèi)容"); ? ? ? } ? ? ? const todo: todo = { ? ? ? ? id: Date.now(), ? ? ? ? title: title.value, ? ? ? ? isture: false, ? ? ? }; ? ? ? props.addtodo(todo); ? ? ? title.value='' ? ? }; ? ? return { ? ? ? add, ? ? ? title, ? ? }; ? }, }); </script>
list.vue
<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>
listitem.vue
<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"; //導(dǎo)入接口類型 import {todo} from "../../../type/todo" export default defineComponent({ ? setup() {}, ? props:{ //定義todos的類型是自己定義的todo接口 ? ? todos:Object as ()=>todo ? } }); </script>
footer.vue
<template> ? ? <div class="todo-footer"> ? ? ? ? <label> ? ? ? ? ? <input type="checkbox" ? ? /> ? ? ? ? </label> ? ? ? ? <span ?> ? ? ? ? ? <span >已完 </span> / 全部? ? ? ? ? </span> ? ? ? ? <button class="btn btn-danger" ?>清除已完成任務(wù)</button> ? ? ? </div> </template>
<style scoped> /* @import"./footer.css"; */ </style>
<script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ ? ? setup() { ? ? ? ?? ? ? }, }) </script>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue開發(fā)一個(gè)實(shí)時(shí)性時(shí)間轉(zhuǎn)換指令
我們就來實(shí)現(xiàn)這樣一個(gè)Vue自定義指令v-time,將表達(dá)式傳入的時(shí)間戳實(shí)時(shí)轉(zhuǎn)換為相對(duì)時(shí)間。下面小編給大家?guī)砹耸褂肰ue開發(fā)一個(gè)實(shí)時(shí)性時(shí)間轉(zhuǎn)換指令,需要的朋友參考下吧2018-01-01vue2.x 對(duì)象劫持的原理實(shí)現(xiàn)
這篇文章主要介紹了vue2.x 對(duì)象劫持的原理實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04vue2.0與bootstrap3實(shí)現(xiàn)列表分頁效果
這篇文章主要為大家詳細(xì)介紹了vue2.0與bootstrap3實(shí)現(xiàn)列表分頁效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11vue-model實(shí)現(xiàn)簡易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了vue-model實(shí)現(xiàn)簡易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08vue+openlayer5獲取當(dāng)前鼠標(biāo)滑過的坐標(biāo)實(shí)現(xiàn)方法
在vue項(xiàng)目中怎么獲取當(dāng)前鼠標(biāo)劃過的坐標(biāo)呢?下面通過本文給大家分享實(shí)現(xiàn)步驟,感興趣的朋友跟隨小編一起看看吧2021-11-11Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08