最近比较忙,忙着工作交接,忙着招人、忙着各种会,更新很少,这一篇也是作为本入门系列的最后一篇了,以后可能会写一些自己在前端这块的心得或者体会了,无关乎使用什么框架,可能就是原生的js、dom、编程模式或者框架相关,比如vue比如ng等等,入门篇虽然每一篇都写的比较粗糙,主要是因为我没有一个好的规划,想到哪里写到哪里,整体比较乱,不过无论怎样,但是都涉及了vue的一个知识点,这也是我几年内不常写博客,所以写一篇文章之前没有一个大纲和规划,这一点我会在后期的文章中注意。

  这一篇文章会把上一片剩下的坑填一下:

  1、编辑删除功能

  2、新增、查询功能

  首先我们添加删除编辑功能,在IView中,在表格中添加删除功能可以使用自定义模版列的方式,使用render函数,该render函数使用方式和vue中render函数类似,todolist.vue文件中修改我们的文件如下:

<template>
<Table border :columns="columns" :data="items"></Table>
</template>
<script>
export default{
data(){
return {
columns:[
{
title:'Id',
key:'id'
},
{
title:'title',
key:'title',
},
{
title:'desc',
key:'desc'
},
{
title:'actions',
render:(createElement,params)=>{
return createElement('div',[
createElement('Button',{
props:{
type:'primary',
size:'small',
},
on:{
click:()=>{
this.remove(params.row.id);
}
}
},'remove'), createElement('Button',{
props:{
type:'error',
size:'small'
},
on:{
click:()=>{
this.edit(params.row);
}
}
},'edit')
])
} }
]
}
},
props:[
'items'
],
methods:{
edit: function (todo) {
console.log(todo);
this.$store.commit('edit',todo);
},
remove: function (id) {
console.log(id);
this.$store.commit('remove',{id:id});
}
}
}
</script>

保存,我们的webpack会自动刷新浏览器,在浏览器中我们可以到如下结果:

 

一步一步学习Vue(十三)的更多相关文章

  1. 一步一步学习Vue(六)

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  2. 一步一步学习Vue(十一)

    本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var ...

  3. 一步一步学Vue(四)

    接上篇.上篇中给出了代码框架,没有具体实现,这一篇会对上篇定义的几个组件进行分别介绍和完善: 1.TodoContainer组件 TodoContainer组件,用来组织其它组件,这是react中推荐 ...

  4. 一步步带你做vue后台管理框架(二)——上手使用

    系列教程<一步步带你做vue后台管理框架>第二课 github地址:vue-framework-wz 线上体验地址:立即体验 闲扯再多不会用也没白搭,这节课我来带大家直接上手框架,体验到简 ...

  5. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  6. 一步一步学Vue(六)

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  7. 12.Linux软件安装 (一步一步学习大数据系列之 Linux)

    1.如何上传安装包到服务器 有三种方式: 1.1使用图形化工具,如: filezilla 如何使用FileZilla上传和下载文件 1.2使用 sftp 工具: 在 windows下使用CRT 软件 ...

  8. (转) 一步一步学习ASP.NET 5 (四)- ASP.NET MVC 6四大特性

    转发:微软MVP 卢建晖 的文章,希望对大家有帮助.原文:http://blog.csdn.net/kinfey/article/details/44459625 编者语 : 昨晚写好的文章居然csd ...

  9. (转) 一步一步学习ASP.NET 5 (二)- 通过命令行和sublime创建项目

    转发:微软MVP 卢建晖 的文章,希望对大家有帮助. 注:昨天转发之后很多朋友指出了vNext的命名问题,原文作者已经做出了修改,后面的标题都适用 asp.net 5这个名称. 编者语 : 昨天发了第 ...

  10. 一步一步学习SignalR进行实时通信_1_简单介绍

    一步一步学习SignalR进行实时通信\_1_简单介绍 SignalR 一步一步学习SignalR进行实时通信_1_简单介绍 前言 SignalR介绍 支持的平台 相关说明 OWIN 结束语 参考文献 ...

随机推荐

  1. Wannafly交流赛1(施工中)

    A.有理数 签到题:直接用floor函数就行了,详细看代码 #define debug #include<stdio.h> #include<math.h> #include& ...

  2. Linux安装java环境教程

    前言: 本教程基于jdk 1.8,但是此教程适用于jdk1.7等版本. 教程正文: 1.1. 登录Oracle官网下载jdk1.8安装包(gz结尾) 这里可以用"wget + 下载地址&qu ...

  3. 2018最新版本Sublime Text3注册码(仅供测试交流使用)

    -– BEGIN LICENSE -– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...

  4. sqlplus 的安装和配置

    sqlplus :  oracle公司提供用户操作oracle数据库的工具. 安装所需的包:  1.oracle 客户端    2.sqlplus工具 官方下载地址  http://www.oracl ...

  5. 2017-2018-1 Java演绎法 小组成员贡献量汇总

    [第一周]贡献量(31) [说明] 完成情况 是指 每次是否全部完成分配的任务,如果全部完成贡献量记为1,否则记为0,与贡献量(时间量)相加计算贡献比例,由于前十周有具体的任务分配,Alpha阶段(第 ...

  6. Java Collections API和泛型

    Java Collections API和泛型 数据结构和算法 学会一门编程语言,你可以写出一些可以工作的代码用计算机来解决一些问题,然而想要优雅而高效的解决问题,就要学习数据结构和算法了.当然对数据 ...

  7. scrapy爬虫框架教程(二)-- 爬取豆瓣电影TOP250

    scrapy爬虫框架教程(二)-- 爬取豆瓣电影TOP250 前言 经过上一篇教程我们已经大致了解了Scrapy的基本情况,并写了一个简单的小demo.这次我会以爬取豆瓣电影TOP250为例进一步为大 ...

  8. 在深度linux下安装pip3与jupyter

    前言 以下安装说明基于已经正确安装python3 文件下载 https://pypi.python.org/pypi/pip 下载pip-9.0.1.tar.gz (md5, pgp)文件 安装准备工 ...

  9. 《招一个靠谱的移动开发》iOS面试题及详解(上篇)

    以下问题主要用于技术的总结与回顾 主要问题总结 单例的写法.在单利中创建数组应该注意些什么. NSString 的时候用copy和strong的区别. 多线程.特别是NSOperation 和 GCD ...

  10. GPUImage实战问题解决

    在项目中遇到了使用完GPUImage以后,内存不释放的问题,翻阅官方API,找到了解决方法: deinit{ GPUImageContext.sharedImageProcessingContext( ...