需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交互("删除已完成任务":接收一个函数) 3.在App.vue中改标签 传:todos和两个函数 4.在methods中定义两个函数 //删除全部已完成任务,要不要参数?怎样判断? //判断做这个事情有没有条件,假如我不传参数,能不能搞定 //说白了 {title:'吃饭',complete…

TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应该定义在哪个组件 (3).更新父组件状态 (4).将函数传递给TodoHead.vue组件 (5).在TodoHeader.vue中声明接收属性 (6). (7).页面显示截图: 厉害了!!!…

注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteItem"(不要用delete,因为是关键字) 2.写对应的方法 3.App.vue中删除指定下标的评论 4.deleteComment()这个方法最终要传给Item.vue 组件 但Item.vue现在看不到,需要逐层传递 5.List.vue中需要声明deleteComment属性, 6.声明属性,…

最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, =================================================================== 1.绑定事件监听 (1).跟button绑定,怎么绑呢?@click="add" (2).最终将自己的数据收集起来,添加到conmments中去 ----------…

自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$on(eventName,回调函数) ================================================================== 之前App.vue和TodoHeader.vue组件之间传递信息靠的是函数的形式 而现在vue自定义事件代替传函数这种形式 现在改…

删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo =================================================================== 显示隐藏背景的变化,首先加监听 1.区别两对属性; onmouseenter="" onmouseleave=""onmouseover="" onmouseout=""区别: (1).进来的时候mouseenter和mou…

组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js =============================================================== 1.订阅消息 PubSub.subscribe('msg',function(msg,data){}) 2.发布消息 PubSub.publish('msg',data) 3.注意 1).优点:此方式可实现任意关系组件间通信(数…

页面效果展示截图: 第一步.首先拆分组件 (1).首先看一下是上下/左右结构 确定为:输入框+列表+底部; (2).确定名字 (3).创建对应的组件 =================================================================== 第二步:静态组件(拆分页面+拆分样式) 1.拆分页面 (1). (2). (3).拆分成功后,需要在App.vue中引入这3个组件写成标签 2.拆分样式 (1).在src下新建样式base.css 将index.c…

(1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组todos究竟放在哪个组件中保存? 看某个组件需要还是某些组件需要;分析各个组件都需要,故放在父组件中App.vue (3)在App.vue组件中初始化数据, <1>.先摆好结构 <2>.写入数组数据 <3>.将组件交给<TodoList/>使用 实现初始化显示…

最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块需要想外暴露某些东西* 1.函数(1个函数为1个功能)* 2.对象(对象可以包含多个功能,因为对象中可以包含多个方法)* 究竟选择暴露函数还是对象?选择依据:需要一个功能还是多个功能* 1个功能用函数,多个功能用对象而我们现在1个读,1个写,所以需要两个方面的功能,故向外暴露对象 3.引入文件 理解…