和接口对接的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. Jmeter(十二) - 从入门到精通 - JMeter逻辑控制器 - 终篇（详解教程）

    1.简介 Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in which Samplers are processed.”. 意思 ...

  2. git merge整理

    ========================================================== git bash merge 一.开发分支(dev)上的代码达到上线的标准后,要合 ...

  3. JavaWeb网上图书商城完整项目--day02-27.查询所有分类功能之Servlet和Service层

    我们在上面实现了数据库层的代码,现在我们来实现业务层和Servlet层的代码:业务层的代码如下: package com.weiyuan.goods.category.service; import ...

  4. LeetCode 80，不使用外部空间的情况下对有序数组去重

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题的第49篇文章,我们一起来看LeetCode的第80题,有序数组去重II(Remove Duplicates fr ...

  5. Vue学习-组件的基本使用（局部组件）

    目录 示例代码 1.创建组件(构造器对象创建-Vue.extend) 2.注册组件 3.使用组件 4.语法糖创建并注册组件 示例代码 http://jsrun.net/H8vKp/edit 1.创建组 ...

  6. yqq命令

    用 apt-get install 安装时 ,会有一个提问,问是否继续,需要输入 yes.使用 yqq 的话,就没有这个提问了,自动 yes . 例如下面的更新和安装nginx: apt-get -y ...

  7. python将列表按行写入csv

    import csv rows2 = ['abc1/ab1c','N'] for n in range(10): f = open("ok.csv", 'a',newline='' ...

  8. 在MFC下绘制直线，使用橡皮筋技术，可以使直线效果跟随鼠标移

    void CGraphic1View::OnMouseMove(UINT nFlags, CPoint point) {        if(MK_LBUTTON == nFlags)    {    ...

  9. 深度学习论文翻译解析（八）：Rich feature hierarchies for accurate object detection and semantic segmentation

    论文标题:Rich feature hierarchies for accurate object detection and semantic segmentation 标题翻译:丰富的特征层次结构 ...

  10. 前端性能优化_css加载会造成哪些阻塞现象？

    css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行.这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在 ...