代码

运行效果

深度监视

概念：为了发现对象内部值的变化，可以在选项参数中指定 deep: true ；注意监听数组的变动不需要这么做
方法使用
第一个handler：其值是一个回调函数；即监听到变化时应该执行的函数
第二个是deep：其值是true或false；确认是否深入监听（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数

插槽使用

概念：和 HTML 元素一样，我们经常需要向一个组件传递内容，Vue 自定义的元素可以很愉快的帮助我们实现
方法使用：子组件通过slot预留插槽，父组件通过name关键字进行插槽。

注意/知识点

将界面分割成不同的组件后，如果CSS不好分割，可以将CSS定义为全局的，将其放在assets文件夹，并在main.js中引入
如果使用props通信，需要一层层向下传递todos数据，非常繁琐。同时，数据回传也需要一层层回传。
App.vue

List.vue

Item.vue
为li标签绑定事件，控制删除按钮是否显示
动态绑定CSS样式
window.confirm确认弹窗
绑定回车事件
javascript中reduce方法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
|参数 |描述|
|-|-|
|function(total,currentValue, index,arr) |必需。用于执行每个数组元素的函数。|
|initialValue |可选。传递给函数的初始值|
函数参数:
|参数 |描述|
|-|-|
|total |必需。|初始值, 或者计算结束后的返回值。
|currentValue |必需。|当前元素
|currentIndex |可选。|当前元素的索引
|arr |可选。|当前元素所属的数组对象。
数据持久化本地化localstorage&sessionsstorage
自定义事件
子组件绑定传递给父组件的时间

父组件绑定监听回调事件

改造代码——使用vuex

代码

代码结构

知识点

stroe.js的拆解

mutations-type用来约束mutations和actions之间的操作
index.js

实战Vue：ToDoList相关推荐

视频教程-最新完整VUE前端教程从入门到精通，纯干货企业级项目实战-Vue
最新完整VUE前端教程从入门到精通,纯干货企业级项目实战 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开 ...
实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序生命周期钩子函数父组件与子组件执行顺序生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
实战 Vue 之实现拖曳排序功能
实现拖曳排序功能前言一.功能描述二.代码实现三.使用 draggable 组件小结四.完整代码前言在前面一节 <实现添加和删除常用应用功能> 讲到了删除和添加常用应用功能,今 ...
Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
Vuex实战项目—ToDoList代码及流程详解
ToDoList实战一.安装依赖二.全部代码文件夹结构三.流程步骤 1.列表数据的动态加载 2.文本输入框的双向同步 3.添加事项的操作 4.删除功能 5.复选框状态的绑定 6.修改复选框的是 ...
vue todolist
最近初学vue,做最简单的todolist <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
实战 | Vue + Element UI 页面创建
这是小小本周的第六篇,本篇将会着重讲解关于Vue和Element UI 相关的内容思维导图网页版Vue Cli 基本使用这里使用Vue Cli 进行基本的使用安装 npm install -g ...
vue进阶实战 vue进阶课程 vue进阶
每个章节都有对接的文章链接 1. r e f s , refs, refs,parent,$children 基础使用:参考vue官方文档 $refs 父组件调用子组件的方法或属性 $parent 子 ...
首次实战Vue高仿移动端QQ音乐项目解析
博主是第一次写博客,欢迎前来指正! 项目预览地址:http://dv20912014.iok.la (这里重点强调一下,项目是使用花生壳内网穿透映射出去的,为什么要这样做下面我会做详细的解释,由于用 ...
DMap(谛听)——实战Vue百万条数据渲染表格组件开发
近几个月在开发一个基于Vue的数据可视化分析辅助应用---DMap(谛听),一套为数据分析师和数据科学家提供的基于位置大数据分析的工具,旨在提高数据分析效率,降低获取多数据并行分析成本,简化大屏和数据 ...

实战Vue：ToDoList

代码

运行效果

深度监视

插槽使用

注意/知识点

改造代码——使用vuex

代码

代码结构

知识点

实战Vue：ToDoList相关推荐

最新文章

热门文章