vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存
@[toc] 概述 前面文章案例已经练习了父子组件之间的通信,这一节讲述如何把todos数组放进本地缓存中,因为实际开发场景中频繁查询的数据很有可能会用到本地缓存技术。 思考:如何改成使用本地缓存,是写一堆按钮每次触发就是往本地缓存种get和set?答案是错误的,因为太复杂了会写一堆的get和set...
vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
@[toc] 改动的地方 使用地方App和MyFooter之间使用自定义事件传值 App.vue <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/> methods:...
vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线
@[toc] 改动的地方 注意点1:使用地方App和MyItem之间使用全局事件总线,之前方式是App传给MyList,然后MyList再传给MyItem,之前缺陷是MyList只作为传递着啥都不干,显得太绕圈,太多余。 main.js new Vue({ el:'#app',...
vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布
@[toc] 改动的地方 注意点1:实现App和MyItem的删除功能,使用消息订阅与发布方式实现通信。 App.vue import pubsub from 'pubsub-js' methods: { //删除一个todo deleteTodo(_,id){ this.todos = this.todo...
vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮
@[toc] 改动的地方 注意点1:改动App和MyItem页面注意点2: 问题:为啥按钮的css样式要放在App.vue中而不是放在MyItem.vue中? 答案:为了统一样式,把所有样式都放在App.vue中,这样子组件引用后按钮样式会全局统一。注意点3:动态给to...
vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度
@[toc] 改动的地方 注意点:让每一个添加和删除的操作有一个柔和的动画效果,有两种方式。方式1:在MyItem添加动画效果使用\标签;方式2:在MyList中添加效果使用\标签。下面案例代码使用方式2。 MyList.vue <transition-group name="todo"...
本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。