// 勾选或取消勾选checkTodo(id){this.todos.forEach((todo)=>{if(todo.id===id)todo.done=!t...
刚开始非常不习惯,因为在react里写js代码很明确需要在{}里写,但是vue全是引号里编写,在这里先暂且这样理解吧,当你使用v-指令语法时候,是个属性的=后面的""里就是要写js代码了。 所以这里我们不能写原生的disabled属性,这样vue会把后面的三元表达式认为是字符串。 效果如下: 五.实现item的删除功能 我们希望在每...
我们需要拿到当前项目的index值,很简单,去拿v-for指令的第二个参数,同时将该值传入给我们的del函数 (如果之前你了解过react,那么这里你一定会有疑惑,因为react这种场景是需要使用高阶函数返回这个del函数的,不然就会造成组件刚挂载就执行的效果,但是vue不会,但是其实vue背后帮你写成了这样的代码) 我也更习惯这样的...
在list中没数据时,或者第一次启动app时,注意localStorage.getItem返回null的问题 处理无法保存勾选状态的现象——启用深度检测App.vue:<template> <MyHeader :appAddItem="appAddItem" /> <MyList :todos="todos" :appRemoveTodo="appRemoveTodo" /> <MyFooter :todos="todos" :appCheckAllTodo="appCheckAll...
【Vue】使用单文件组件编写 TodoList 实践内容: 1)编写to do list 案例。 我们在单文件组件里面写。 首先大家对to do list的实现是比较清楚的,结合新的语法去对语法进行一个巩固,这样的话可能大家理解起来会更容易一些。...
由于工作需要,以后可能会敲vue代码了,所以今天开始会零散的记录一下自己学Vue3.0的一些案例。 就从经典的TodoList案例开始吧～ 也算补上之前react的todolist案例的坑吧 简单的在草稿纸上写出页面的整体设计思路为3层div包裹,希望刚开始学习的时候,一定要自己去实际动手去画出大概的效果图。再简单不过的页面设计了。
import { createApp }from'vue'//使用createApp创建一个应用实例import Appfrom'./TodoList.vue'//从一个单文件组件中导入根组件createApp(App).mount('#app')//应用实例必须在调用了 .mount() 方法后才会渲染出来;与index.html中div=app的挂载点进行绑定 ...
import { createApp } from 'vue' //使用createApp创建一个应用实例 import App from './TodoList.vue' //从一个单文件组件中导入根组件 createApp(App).mount('#app') //应用实例必须在调用了 .mount() 方法后才会渲染出来;与index.html中div=app的挂载点进行绑定 ...
上篇写了:👉Vue中全局事件总线的概念及基本使用 这篇就打算用全局事件总线来改造一下之前写的TodoList案例,一天学习一点,我们一起进步冲。 一、案例效果 需要实现的东西,和之前是一样的,只是我们换成用全局事件总线来进行组件之间的通信。 二、分析为什么要换成全局事件总线 ...
Vue3.0实现todolist之常用的生命周期onMounted 生命周期:一个组件从创建到销毁的过程 1:setup 不需要引入的生命周期:setup 代表组件创建的过程 可以直接在里面使用 2:onMounted 代码语言:javascript 复制 import{defineComponent,ref,onMounted}from"vue"; onMounted组件挂载的生命周期 比setup晚一些,是一个函数,里面传入...