和接口对接的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. rest_framework django 简单使用(数据库创建数据, 覆盖数据, 其他的大同小异)

    事先说几个坑:数据库定义字段时候,不要定义name 要定义 username 首先, 定义model(简单定义) from django.db import models from django.co ...

  2. 深入理解JVM(③)ZGC收集器

    前言 ZGC是一款在JDK11中新加入的具有实验性质的低延迟垃圾收集器,目前仅支持Linux/x86-64.ZGC收集器是一款基于Region内存布局的,(暂时)不设分代的,使用了读屏障.染色指针和内 ...

  3. lw_oopc(c语言实现面向过程宏文件)解析

    一:计算结构体成员变量偏移量宏 #ifdef LW_OOPC_USE_USER_DEFINED_OFFSETOF // 有些环境可能不支持,不过,这种情形极少出现 #define LW_OOPC_OF ...

  4. logback.xml 不能被加载,logback不能被执行,logback.xml 无法生效,slf4j日志样式输出失败

    1. 原因 logback.xml 无法被加载, 尝试了好久还是失败,哎,最后新建工程竟然可以,所以说还是项目的问题: 原来项目依赖了两个slf4j.jar,是版本冲突了: 2. 查找原因 idea ...

  5. Day12-微信小程序实战-交友小程序-优化“附近的人”页面与serach组件的布局和样式以及搜索历史记录和本地缓存*内附代码)

    回顾/:我们已经实现了显示附近的人的功能了,可以多个人看到附近的人页面了 但是还是要进行优化有几个问题:1.我们用户选择了其他的自定义头像之后,在首页可以看到头像的变化,但是在附近的人中头像会变成报错 ...

  6. 入门大数据---Spark_Structured API的基本使用

    一.创建DataFrame和Dataset 1.1 创建DataFrame Spark 中所有功能的入口点是 SparkSession,可以使用 SparkSession.builder() 创建.创 ...

  7. 如何查看class文件的jdk版本

    版权声明:本文为博主原创文章,转载请注明本文链接.文章内容如有错误望能指正,以免误导更多人. https://blog.csdn.net/gnail_oug/article/details/47145 ...

  8. C# 从1到Core--委托与事件

    委托与事件在C#1.0的时候就有了,随着C#版本的不断更新,有些写法和功能也在不断改变.本文温故一下这些改变,以及在NET Core中关于事件的一点改变. 一.C#1.0 从委托开始 1. 基本方式 ...

  9. 一.2.序列化使用之用户资源功能app

    1.环境准备:(1).新建功能app: (python36env) [vagrant@CentOS7 devops]$ python manage.py startapp users ---建议以后用 ...

  10. SpringBoot下Druid连接池的使用配置

    Druid是一个JDBC组件,druid 是阿里开源在 github 上面的数据库连接池,它包括三部分: * DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体 ...