最近比较忙,忙着工作交接,忙着招人、忙着各种会,更新很少,这一篇也是作为本入门系列的最后一篇了,以后可能会写一些自己在前端这块的心得或者体会了,无关乎使用什么框架,可能就是原生的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. Android类参考---SQLiteOpenHelper

    public 抽象类 SQLiteOpenHelper 继承关系 java.lang.Object |____android.database.sqlite.SQLiteOpenHelper 类概要 ...

  2. JAVA基础之字符串和面向对象

    * [String 类] * 1. String类位于java.lang包中,java.lang是java的语言包,使用时无须导包,自动导入. * * 2.拿到一个字符串对象: * ①字面量声明:St ...

  3. VC++开发AutoCAD 2018/objectARX 用向导新建项目无法新建的问题

    话说笔者最近想用新机子上装的AutoCAD ObjectARX 2018来进行二次开发,兴致勃勃安装了ARX API和向导, 然后打开VS2015,新建项目,无法新建. 折腾了一下,还是没有解决,后面 ...

  4. 解决flask的端口占用

    问题:socket.error: [Errno 48] Address already in use 在编辑flask代码时,如果没有关闭flask的程序,默认的5000端口一直被占用. 再次运行fl ...

  5. Linux下进程间通信--共享内存:最快的进程间通信方式

    共享内存: 一.概念: 共享内存可以说是最有用的进程间通信方式,也是最快的IPC形式.两个不同进程A.B共享内存的意思是,同一块物理内存被映射到进程A.B各自的进程地址空间. 进程A可以即时看到进程B ...

  6. python实现简单tftp(基于udp)

    tftp是基于udp的协议 实现简单的tftp,首先要有tftp的协议图. tftp默认接收端口为69,但每次有连接过来后,tftp会随机分配一个端口来专门为这个连接来服务. 操作码:1.上传 2.下 ...

  7. PHP截取日期

    date( 'Y-m-d ',strtotime('2017-10-9 12:23:35')) 通过时间格式,获取的是2017-10-9

  8. MongoDb进阶实践之五 MongoDB修改命令详述

    一.引言         上一篇文章我们已经详细介绍了MongoDB数据库的有关查询的内容,但是这只是所有查询命令的冰山一角.所有查询命令都写完也没有必要,我只是写了一些常用的命令,对MongoDB的 ...

  9. C语言学习(二)

    今天在程序员面试题中,碰到一个有意思的题目:数组a[N],存放了1至N-1个数,其中某个数重复一次,现在要求找出重复的数字且程序时间复杂度必须为O(N).乍一看,如果不计时间复杂度和空间复杂度程序比较 ...

  10. linux下的Shell编程(5)循环

    Shell Script中的循环有下面几种格式: while [ cond1 ] && { || } [ cond2 ] -; do - done for var in -; do - ...