和接口对接的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. RocksDB事务的隔离性分析【原创】

    Rocksdb事务隔离性指的是多线程并发事务使用时候,事务与事务之间的隔离性,通过加锁机制来实现,本文重点剖析Read Commited隔离级别下,Rocksdb的加锁机制. Rocksdb事务相关类 ...

  2. 这一次搞懂Spring Web零xml配置原理以及父子容器关系

    前言 在使用Spring和SpringMVC的老版本进行开发时,我们需要配置很多的xml文件,非常的繁琐,总是让用户自行选择配置也是非常不好的.基于约定大于配置的规定,Spring提供了很多注解帮助我 ...

  3. Zookeeper分布式过程协同技术 - 概念及基础

    Zookeeper分布式过程协同技术 - 概念及基础 Zookeeper是什么? Zookeeper是一种分布式过程协同技术,其所提供的客户端API功能强大,其中包括: 保障强一致性.有序性和持久性. ...

  4. eclipse使用git提交代码

    准备工作: 目的:eclipse使用git提交本地项目,提交至远程github上 eclipse版本:eclipse4.5  64位 jdk版本:jdk-1.7 64位 项目类型:maven web项 ...

  5. MongoDB入门三

    MongoDB字段问题  增删查改操作 删除一列操作db.RiderReaTimePositon.update({},{$unset:{'CreateTime':''}},false,true)db. ...

  6. 补充:回答网友的问题,如何不用路径,而直接将CImage画到DC中,之后DC一起显示.

    补充:回答网友的问题,如何不用路径,而直接将CImage画到DC中,之后DC一起显示.注释掉 pDC->BeginPath(); // 打开路径层 pDC->Rectangle(0,0,p ...

  7. JS中字符串和数组的相互转化

    题目:利用var s1=prompt("请输入任意的字符串:") ,可以获取用户输入的字符串,试编程将用户输入的字符串“反转”,并且将字符串输出. 思路:字符串对象的方法中并没有实 ...

  8. oracle 环境变量配置 字符集编码配置

    字符编码的环境变量配置: http://jingyan.baidu.com/article/e73e26c0c20f1a24adb6a73e.html (1).数据库服务器字符集select * fr ...

  9. 洛谷 P2212 【[USACO14MAR]Watering the Fields S】

    一道最小生成树模板题,这里用的Kruskal算法,把每两点就加一条边,跑一遍最小生成树即可. #include <bits/stdc++.h> using namespace std; s ...

  10. py之logging模块

    参考:https://www.cnblogs.com/yuanchenqi/articles/5732581.html 一 (简单应用) import logging logging.debug('d ...