和接口对接的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. 腾讯云Redis混合存储版重磅推出，万字长文助你破解缓存难题！

    导语 | 缓存+存储的系统架构是目前常见的系统架构,缓存层负责加速访问,存储层负责存储数据.这样的架构需要业务层或者是中间件去实现缓存和存储的双写.冷热数据的交换,同时还面临着缓存失效.缓存刷脏.数据 ...

  2. 【Flutter实战】定位装饰权重组件及柱状图案例

    老孟导读:Flutter中有这么一类组件,用于定位.装饰.控制子组件,比如 Container (定位.装饰).Expanded (扩展).SizedBox (固定尺寸).AspectRatio (宽 ...

  3. 一文搞懂InnoDB索引存储结构

    参考资料:掘金小册:MySQL 是怎样运行的:从根儿上理解 MySQL B+树 我们知道,InnoDB是用B+树作为组织数据形式的数据结构.不论是存放用户记录的数据页,还是存放目录项记录的数据页,我们 ...

  4. ElasticSearch中的sort排序和filedData作用

    默认情况下,ElasticSearch 会根据算分进行排序: 可以使用 sort API 指定排序的规则: POST /kibana_sample_data_ecommerce/_search { & ...

  5. 关于SPSS Modeler18 提示：用于定义的观测值的字段的值无效

    今天在做实验的时候,按照实验步骤严格设置了参数,当运行节点的时候,一直提示:用于定义的观测值的字段的值无效,如下图 我把我的流文件发给同学,同学的机器上是可以运行的,但是我的不行,不知道什么原因,有知 ...

  6. Centos7上设置zookeeper自启动

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/zhouzhiwengang/artic ...

  7. scheduler的调度规则

    对爬虫的请求进行调度管理 允许接收requests并且会调度一个request去下载,且具有去重机制 优先级和队列不会被调度器执行(调度器不管优先级的问题),用户使用字段给每个Request对象,可以 ...

  8. python使用selenium和requests.session登录抓取

    # Author:song from selenium import webdriver from selenium.webdriver.common.keys import Keys from re ...

  9. python基础--自定义模块、import、from......import......

    自定义模块.import.from......import...... 1)模块的定义和分类 1.模块是什么? 我们知道一个函数封装了一个功能,软件可能是有多个函数组成的.我们说一个函数就是一个功能, ...

  10. 【Oracle】表碎片重用规则

    看完该篇文章你可以了解如下问题:表碎片是如何产生的,这些碎片能否重用? 数据库版本如下: SYS@zkm> select banner from v$version where rownum=1 ...