和接口对接的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. Tensorflow 中（批量）读取数据的案列分析及TFRecord文件的打包与读取

    内容概要: 单一数据读取方式: 第一种:slice_input_producer() # 返回值可以直接通过 Session.run([images, labels])查看,且第一个参数必须放在列表中 ...

  2. 团队进行Alpha冲刺--冲刺总结

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--冲刺总结 作业正文 如下 其他参 ...

  3. oracle不足位数补零的实现sql语句

    select rpad('AAA',5,'0') from dual; 这样就可以了 [注意] 1.'AAA'为待补字符:5表示补齐后的总字符长度:0表示不足时补什么字符 2.rpad是右侧补0,左侧 ...

  4. 黎活明8天快速掌握android视频教程--25_网络通信之资讯客户端

    1 该项目的主要功能是:后台通过xml或者json格式返回后台的视频资讯,然后Android客户端界面显示出来 首先后台新建立一个java web后台 采用mvc的框架 所以的servlet都放在se ...

  5. MySql数据库GROUP BY使用过程中的那些坑

    MySql数据库GROUP BY使用过程中的那些坑 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 特别注意: group by 有一个原则,就是 select 后面的所有 ...

  6. SQL注入之Boolean型盲注

    什么是Boolean型注入 Boolean型的注入意思就是页面返回的结果是Boolean型的,通过构造SQL判断语句,查看页面的返回结果是否报错,页面返回是否正常等来判断哪些SQL判断条件时成立的,通 ...

  7. 深度学习“四大名著”发布！Python、TensorFlow、机器学习、深度学习四件套！

    Python 程序员深度学习的"四大名著": 这四本书着实很不错!我们都知道现在机器学习.深度学习的资料太多了,面对海量资源,往往陷入到"无从下手"的困惑出境. ...

  8. stm32存储器映像和标准库中定义外设地址的方法

    结合存储器映像理解stm32标准库中定义外设地址的方法. stm32f103zet6是32位的.它所能访问的地址空间范围为2^32=4GB,把4GB分为8个block,分别为block0-block- ...

  9. 什么是EL表达式？

    1.什么是EL表达式? EL(Expression Language) 是为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP 中简 ...

  10. 单表数据加载到TreeView(.Node.Level>=2) "蝴蝶效应" SelectedNode注意事项 效能优化 综合问题

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Configurat ...