hooks---index.ts import { SET_TODO, SET_TODO_LIST,REMOVE_TODO,SET_TODO_STATUS,SET_DOING_STATUS } from "@/store/actionTypes"import { ITodo, TODO_STATUS } from "@/typings"import { Store, useStore } from "vuex"import _store from "@/store"import { watch } from "vue"export interface ...
hooks---index.ts import{SET_TODO,SET_TODO_LIST,REMOVE_TODO,SET_TODO_STATUS,SET_DOING_STATUS}from"@/store/actionTypes" import{ITodo,TODO_STATUS}from"@/typings" import{Store, useStore }from"vuex" import_storefrom"@/store" import{ watch }from"vue" exportinterfaceIUseTodo{ setTodo:(value:s...
</template> import { defineComponent,reactive,ref } from 'vue'; import {IUseTodo, useTodo} from "../../hooks/index" export default defineComponent({ name:"TodoInput", setup(){ const todoValue=ref<string>("") const setTodoValue=(e:KeyboardEvent)=>{ console.log(todoValue.value) c...
npm run dev 2、开始编写 todolist 为了项目开起来稍微美观一点,这里使用ant-design-vue的UI框架,另外框架的组件按需引入还需要使用(unplugin-vue-components)。在项目里边安装: // 按需引入插件 npm install unplugin-vue-components -D // UI框架 npm install ant-design-vue@next --save...
.todolist { width: 500px; border: 1px solid #eee; margin: 0 auto; padding: 20px;h3 { color: red; font-size: 40px; } } 分类: Vue3+Ts+Antd 标签: vue3 好文要顶 关注我 收藏该文 微信分享 孤夏 粉丝- 20 关注- 0 +加关注 0 0 升级成为会员 « 上一篇: 6. Vue3 JavaScr...
todoList: [] as Todo[] }) const count= ref(0); console.log(count.value)return{ ...toRefs(data) } }) 定义props props需要使用PropType泛型来约束 import { defineComponent, PropType} from'vue'; interface UserInfo={ id: number, name: string, age...
Todo。From点杠这个什么呢。Types下边的todo,它是点S文件啊,注意点TS文件,好这块有一个todo是吧,好我再把它格式化一下,做一个保存。现在呢,我用一个范围接口的方式来约束我的state啊,包括state里边这个数据,OK,那这块呢,咱们就搞定了。搞定了之后,我们再来看我当前的这个土DOS这个数组是不是被我传到list里边...
首先使用Composition提取出逻辑代码形成TodoList.ts文件 // TodoList.ts import{ref}from'vue' exportdefaultfunction() { constcount=ref(0) constcheckedValue=ref([]) constcheck=()=>{ count.value=checkedValue.value.length } return{count,checkedValue,check} ...
01_Vue3-课程介绍 02:46 02_Vue3-认识TypeScript 04:41 03_Vue3-安装TypeScript 01:08 04_Vue3-我的第一个TS代码 07:23 05_Vue3-vscode中自动编译ts 04:39 06_Vue3-类型注解的解释 05:55 07_Vue3-接口的演示 05:06 08_Vue3-类的演示 06:54 09 Vue3-webpack打包ts 09:25 10 Vue3-基础类...
先创建一个types文件夹,用来存放项目中类型声明文件,比如我们这个 todo 应用,可以创建一个todo.ts: export interface Todo { id: number; title: string; done: boolean; } 然后在components文件夹下新建TodoList.vue,这个组件用来实现处理每个待办事项的操作逻辑 ...