和接口对接的todolist因为有后台的存在,todolist获取的数据会一直存在不丢失(不管你如何刷新页面),思路如下:

首先得先搞到接口:

  • 通过这个接口地址可以获取整段的数据,成功err为0。
  • 于是我们首先第一步就应该先封装好一个初始化函数,以方便我们想要的传参格式fetch(url,  type  ,   {   },function  (   ){       })

  • 然后我们创建一个Vue实例,并让他挂载在html上

  • data下的数据会自动挂载在vue的实例对象上,再内层写一个data存放ajax初始化请求得到的data数据。

  • 因为页面内的所有数据都需要ajax请求获取,重中之重的就是先写一个初始化init函数。

  • 在书写函数时,需要主要this的指向,所以需要浅克隆一个_this变量,用于存放Vue实例

将todolist的雏形完成,并绑定一些事件和值.

完成add、remove函数(利用data._id的唯一性)和虚拟DOM加载完成后执行的mounted钩子函数监听初始化

对着接口改数据要求。

这样一个自动更新数据的todolist就诞生了。

  |

  |

  |

  \    /

\/

通过Vue实现的todolist的更多相关文章

  1. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  2. vue写的ToDoList

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue入门到TodoList练手

    学习资料 慕课网 - vue2.5入门 基础语法 示例代码1 <div id="root"> <h1>hello {{msg}}</h1> &l ...

  4. Vue学习之todolist删除功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue学习之todolist组件拆分

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue学习之todolist功能开发

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue案例之todoLIst实现

    使用Vue实现todolist案例,如有不对敬请大佬多多指教 功能: 1.增加功能:在新增版块里面的输入框内输入数据,点击后面的"添加"按钮,将输入的数据添加到列表中,默认是未完成 ...

  8. 3-1 vue生存指南 - todolist实现-数据渲染

    由于Vue.js作者是中国人,会说汉语,所以国内生态会更好一点.Vue.js作者是尤雨溪,

  9. vue 入门, todoList

    #  实现逻辑: > * 技术栈> 1. 生命周期,creatd( 创建后执行)> 2. methods': 调用事件方法,结果不会缓存> 3. Watch : 监听器,监听输 ...

随机推荐

  1. Centos中使用virtualenvwrapper

    Centos中使用virtualenvwrapper python特有的一种软件环境,创建多个python环境,各个环境之间完全隔离,互不影响.它可以用来解决Python项目开发和运行过程中的依赖项和 ...

  2. Linux监控CPU,内存,磁盘I/O

    简单讲讲Linux下监控 [CPU] 监控CPU,top命令能够实时监控系统的运行状态,并且可以按照CPU.内存和执行时间进行排序,同时top命令还可以通过交互式命令进行设定显示,通过top命令可以查 ...

  3. oracle包package的使用

    创建包 包头: CREATE OR REPLACE PACKAGE test_pkg IS PROCEDURE update_sal(e_name VARCHAR2,newsal NUMBER);  ...

  4. 四层发现-UDP发现

    udp发现要注意选择一个不常用的端口,如果目标ip在up时目标端口是开放状态,那么不管目标ip是否为up状态,都不会收到任何回应,只有在目标ip为down状态且目标端口为关闭状态,才会返回一个目标不可 ...

  5. C# MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

  6. vue-elemnt-admin源码学习

    vue-elemnt-admin源码学习 vue-element-admin是一个基于vue,element-ui的集成的管理后台.它的安装部分就不说了,按照官网的步骤一步步就可以执行了. https ...

  7. HTTPS加密协议详解(一):HTTPS基础知识

    转自:https://blog.csdn.net/hherima/article/details/52469267------------------------------专栏导航:-------- ...

  8. CSS三种布局模型是什么?

    在网页中,元素有三种布局模型:流动模型(Flow) 默认的.浮动模型 (Float).层模型(Layer).下面我们来看一下这三种布局模型. 三种布局模型介绍: 1.流动模型(Flow) 流动(Flo ...

  9. rsync+inotify 备份

    一,服务端安装(备份服务器): #安装rsync cd /usr/local/src/ wget http://rsync.samba.org/ftp/rsync/src/rsync-3.0.9.ta ...

  10. 线下---复习day01

    目录 1 个人介绍 2 关于编辑器 3 基础串讲 3.1 解释型和编译型 3.2 数据类型 3.2.1 一切皆对象 3.2.1 深浅copy 3.2.3 可变类型与不可变类型 3.3 字符编码 3.4 ...