你可以使用Vue CLI来快速搭建一个开发环境。 npm install -g @vue/cli vue create todo-list 1. 2. 在创建项目时,选择Vue 3的选项。完成后,进入项目目录并启动开发服务器: cd todo-list npm run serve 1. 2. 打开浏览器并访问http://localhost:8080,你应该能够看到Vue的欢迎页面。 创建Todo List组件 接...
【摘要】 目录一、todolist项目准备vue3.0环境搭建🍄二、todolist基本结构1. 定义组件🐷2.实现todolist需要用到的四个组件 🐶3.ref定义单个数据 🐭4.reactive定义对象类型的数据🐹5. 实现todolist每个组件需要的数据🐸6. 方法的定义和使用🐯7. 实现todolist每个组件需要的方法 🐵8. vuex五大属性...
3、安装vue环境:cnpm i -g vue @vue/cli 输入vue -V检测vue是否装好 步骤 1:进入d盘 创建一个项目 vue create todolist 这里需要注意一下 要选择Manually select features 等待命令执行 这个时候会发现d盘多了一个文件夹todolist 2:使用vscode打开todolist 在终端运行命令npm run serve 项目创建启动成功 可以在...
import{createStore}from'vuex'exportdefaultcreateStore({//定义所需要的状态的state:{list:[{title:"吃饭",complete:false,},{title:"睡觉",complete:false,},{title:"打豆豆",complete:true,},]},mutations:{//添加任务addTodo(state,payload){state.list.push(payload)},//删除任务 splice(下标,个数)delT...
由于工作需要,以后可能会敲vue代码了,所以今天开始会零散的记录一下自己学Vue3.0的一些案例。 就从经典的TodoList案例开始吧～ 也算补上之前react的todolist案例的坑吧 简单的在草稿纸上写出页面的整体设计思路为3层div包裹,希望刚开始学习的时候,一定要自己去实际动手去画出大概的效果图。再简单不过的页面设计了。
3、安装vue环境:cnpm i -g vue @vue/cli 输入vue -V检测vue是否装好 步骤 1:进入d盘 创建一个项目 vue create todolist 这里需要注意一下 要选择Manually select features 等待命令执行 这个时候会发现d盘多了一个文件夹todolist 2:使用vscode打开todolist ...
import { createApp }from'vue'//使用createApp创建一个应用实例import Appfrom'./TodoList.vue'//从一个单文件组件中导入根组件createApp(App).mount('#app')//应用实例必须在调用了 .mount() 方法后才会渲染出来;与index.html中div=app的挂载点进行绑定 ...
import App from './TodoList.vue' //从一个单文件组件中导入根组件 createApp(App).mount('#app') //应用实例必须在调用了 .mount() 方法后才会渲染出来;与index.html中div=app的挂载点进行绑定 1. 2. 3. 4. TodoList.vue import TodoItem from './components/TodoItem.vue' //引用其他组件 expor...
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 IUseTodo { setTod...
import{ defineComponent,PropType}from'vue'; importTodoItemfrom"./item.vue" import{ITodo}from'@/typings'; import{ useTodo }from'@/hooks'; exportdefaultdefineComponent({ name:"TodoList", props:{ todoList:ArrayasPropType<ITodo[]> },