在对应的模板里面通过 props 配置项进行对应的接收在header组件里接收 addTodo方法 在list 数组里面接收数据 todos数组 在myheader组件里面,运用接收到的方法 ,方法的返回值就到了,todos数组里面,就在数组中添加了对象 在list数组里面进行遍历显示 4,实现勾选 (item到app之间的组件通信,从孙子主键到爷爷组件) 补充知...
2.尚硅谷前端学科--高级技术/尚硅谷Vue3新特性教程/视频/76_尚硅谷_Vue3_todoList案例遍历数据并展示.mp4 原链接:http://www.atguigu.com/ 视频文本 温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准 00:00 好,现在我们要做的第一件事情就是什么呢?我们要来点儿数据,并且这个数据可以在列表里边展示...
</template> exportdefault{ name:'MyHeader', } /* header */ .todo-headerinput{ width:560px; height:28px; font-size:14px; border:1pxsolid#ccc; border-radius:4px; padding:4px7px; } .todo-headerinput:focus{ outline:none; border-color:rgba(82,168,236,0.8); box-shadow:inset01...
2.尚硅谷前端学科--高级技术/尚硅谷Vue技术全家桶(天禹老师主讲)/视频/077_尚硅谷Vue技术_TodoList案例_总结.mp4 原链接:http://www.atguigu.com/ 视频文本 温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准 00:00 好嘞,各位,那在这一小节呢,咱们把todo list这个案例呢给大家总结一下,笔记呢,已...
8-2、TodoList案例添加本地存储 把App.vue加一个监视属性并且设置它里面todos的初始值 //1设置todos初始值,将todos:[]改成 todos:JSON.parse(localStorage.getItem('todos')) || [] //2添加一个监视属性,并且进行深度监视 watch: { todos:{ deep:true, handler(value){ localStorage.setItem('todos',JSON....
/** * 包含多个 mutation name */ export const RECEIVE_TODOS = 'receive_todos' export const ADD_TODO = 'add_todo' export const REMOVE_TODO = 'remove_todo' export const DELETE_DONE = 'delete_done' export const UPDATE_ALL_TODOS = 'update_all_todos' ...
10-3、TodoList事件总线 全局事件总线的本质是给组件绑定自定义事件,只不过这里的组件是this.$bus也就是Vue实例对象 11、消息订阅与发布pubsub 11-1、消息订阅与发布 一种组件间通信的方式,适用于任意组件间通信。 11-2、使用方法 1、调用pubsub.js库命令,安装pubsub:npm i pubsub-js 2、在所用的地方引入...
总结TodoList案例1.组件化编码流程: (1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突 (2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:1).一个组件在用:放在组件自身即可。2).一些组件在用:放在他们共同的父组件上(状态提升)。
077_尚硅谷Vue技术_TodoList案例_总结0 打开网易新闻 体验效果更佳爆笑相声:《拯救莫斯科》郭德纲 于谦 你今天快乐吗 15跟贴 打开APP 真的给我热的不能自理了小爱同学帮我不少,给她家添个家电 子恒海外之旅 1602跟贴 打开APP 这才是猛男该看的电影 阿璇影视 1321跟贴 打开APP 我们刚抗住制裁,如果美利坚...
总结TodoList案例 组件化编码流程: (1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突,在拆样式。 (2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用: 1)一个组件在用:放在组件自身即可。 2)一些组件在用:放在他们共同的父组件上(状态提升)。