通过Vue实现的todolist
和接口对接的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的更多相关文章
- Vue编写的todolist小例子
Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...
- vue写的ToDoList
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue入门到TodoList练手
学习资料 慕课网 - vue2.5入门 基础语法 示例代码1 <div id="root"> <h1>hello {{msg}}</h1> &l ...
- Vue学习之todolist删除功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习之todolist组件拆分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习之todolist功能开发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue案例之todoLIst实现
使用Vue实现todolist案例,如有不对敬请大佬多多指教 功能: 1.增加功能:在新增版块里面的输入框内输入数据,点击后面的"添加"按钮,将输入的数据添加到列表中,默认是未完成 ...
- 3-1 vue生存指南 - todolist实现-数据渲染
由于Vue.js作者是中国人,会说汉语,所以国内生态会更好一点.Vue.js作者是尤雨溪,
- vue 入门, todoList
# 实现逻辑: > * 技术栈> 1. 生命周期,creatd( 创建后执行)> 2. methods': 调用事件方法,结果不会缓存> 3. Watch : 监听器,监听输 ...
随机推荐
- Java根据模板生成Word文档
一,首先制作模板 1.先做一个Word文档, 2.打开Word,然后另存为*.xml文件 3.最后修改*.xml文件的后缀名为*.ftl 二,打开项目编辑器Idea,在pom文件中引入相关架包依赖(我 ...
- 【asp.net core 系列】- 11 Service层的实现样板
0.前言 在<asp.net core 系列>之实战系列中,我们在之前的篇幅中对项目有了一个大概的认知,也搭建了一个基础的项目骨架.那么就让我们继续完善这个骨架,让它更加丰满.这一篇,我将 ...
- Centos7下的MySQL5.6安装
yum install wget yum install perl perl-devel cd /usr/local/src wget https://cdn.mysql.com//Downloads ...
- 查找nginx安装目录并启动
今天公司突然停电,来电后发现服务无法访问了,服务器是部署在公司内 发现ip ping 不通,是服务器没开 手动开了服务器,还是无法访问 可以FTP,但是不能访问服务,说明机器已经开了,有些东西应该没启 ...
- elasticSearch插件metricbeat收集nginx的度量指标
ngx_http_stub_status_module模块是Nginx中用来统计Nginx服务所接收和处理的请求数量,只要在编译安装Nginx的时候加上参数--with-http_stub_statu ...
- activity的四种启动模式详细分析
1.android中通过任务队列来管理activity 采用栈的结构就是后进先出 手机里面如果启动多个应用就会启动多个任务栈来管理对应的activity. 主要解决下面的问题:对应的四种启动模式: 1 ...
- xutils工具上传日志文件
首先下载xutils java包: 添加到项目的工程中: 第二在新建一个类继承application package logback.ecmapplication.cetcs.com.myapplic ...
- python基础扩展(二)
python基础扩展(二) 常用操作 1.startswith(以什么开始) endswith(y)什么结束 s='taiWanw39dd' print(s.startswith('t')) #意思是 ...
- Python干货整理之数据结构篇
1 stack的实现 实现接口: init() 用于初始化stack,数据类型为list size() 用于获得stack的大小 push() 用于往栈中添加元素,添加的元素类型可以是int或者lis ...
- webpack入门进阶(2)
1.4.webpack-dev-server webpack-dev-server是我们在开发阶段需要用到的一个服务器,它会把代码打包到内存,我们可以通过http的方式访问到打包到内存的代码 安装 n ...