和接口对接的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. [bzoj1690] [Usaco2007 Dec] 奶牛的旅行 （最大比率环）

    题目 作为对奶牛们辛勤工作的回报,Farmer John决定带她们去附近的大城市玩一天.旅行的前夜,奶牛们在兴奋地讨论如何最好地享受这难得的闲暇. 很幸运地,奶牛们找到了一张详细的城市地图,上面标注了 ...

  2. Linux文件目录和访问权限

    前言 本文知识点是曾经学习过程中收录整理的,方便学习使用,并非在下撰写. 一>Lniux目录结构 /:根目录,一般根目录下只存放目录,在Linux下有且只有一个根目录.所有的东西都是从这里开始. ...

  3. 记一次mysql小版本升级

    最近护网操作比较紧,基线和漏洞检查比较频繁,新扫描出来的mysql漏洞需要修复,没有啥好的修复方法,只剩下升级版本这一条路,生产环境是5.7.12,二进制文件直接解压使用的,看了一下现在最新的版本,5 ...

  4. 操作系统识别-python、nmap

    识别操作系统主要是用于操作系统漏洞的利用.不管是windows还是linux系统,在安装完毕后都会默认启动一些服务,开启一些端口. 识别目标主机的系统最简单的方法就是发送ping包,windows起始 ...

  5. GCC编译和链接过程

    GCC(GNU Compiler Collection,GNU编译器套件),是由 GNU 开发的编程语言编译器.它是以GPL许可证所发行的自由软件,也是 GNU计划的关键部分.GCC原本作为GNU操作 ...

  6. 使用docker创建mysql容器

    1.拉取mysql容器   docker pull mysql:5.7

  7. python+opencv切割细胞及细胞团（持续更新）

    内容包括:游离细胞的切割,有效细胞的信息提取,找出非正常细胞,细胞团的切割,找出非正常细胞团 代码较多,请移步到我的github

  8. sql 语句和实例

    修改字段格式的sql语句: alter table tablename alter column colname newDataType 比如:alter table mytable alter co ...

  9. 进度条的使用 Progress控件

    MFC编程实例二:进度条的使用 2011-03-22 09:09:09|  分类: C++(C语言) |  标签:进度  nlower  nupper  添加  mfc  |字号 订阅    本人用的 ...

  10. 一文说通MongoDB via Python操作

    Python并不仅仅是一个做Machine Learning的语言.   说到Python,一般都会感觉它关联着ML,如果不是做ML开发,就会觉得离自己很远.而实际上,作为一门语言,Python在应用 ...