vue--CRUD
1. Create
this.$http.post("http://localhost:3000/users",newCustomer).then(function (response) {
this.$router.push({path: "/", query:{alert: "用户信息添加成功!"}});
//$router对象是全局路由的实例,是router构造方法的实例。
});
2. Retrieve
this.$http.get("http://localhost:3000/users/"+id)
.then(function (response){
console.log(response);
this.customer = response.body;
})
3. Update
this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer)
.then(function (response) {
this.$router.push({path: "/", query:{alert: "用户信息修改成功!"}});
});
4. Delete
this.$http.delete("http://localhost:3000/users/"+id)
.then(function () {
this.$router.push({path: "/", query:{alert:' 用户信息删除成功!'}});
});
5.表单提交
<form v-on:submit="addCustomer">
</form>
6. 无信息就不显示的绑定
<组件v-if="信息" v-bind:message="信息"></组件>
7. 其他界面参数的获取:
this.$route.params.id
//$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。
8. e.preventDefault();
//该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
9. 一般的过滤器
模板:
<tr v-for="customer in filterBy(customers,filterInput)" :key="customer.id">
<td>{{ customer.name }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">详情</router-link></td>
</tr>
vue
methods:{
filterBy(customers,value){
return this.customers.filter(function(customer) {
return customer.name.match(value); //按照名字筛选
});
},
},
vue--CRUD的更多相关文章
- elementui入门
1.前端服务器搭建 (1)创建一个static web project (2) 安装 npm install -g vue-cli (3) vue init webpack 项目名 (4)cd 项目名 ...
- Build a Basic CRUD App with Vue.js and nodejs
https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node#add-authentication-with-okta I’ ...
- SSM + VUE 实现简单的 CRUD
一.项目分析 1.需求 (1)使用 ssm + vue 实现一个crud(数据库增删改查)的简单实现.(2)前后端分离,前端页面展示+后台管理. 2.技术点 (1)基础框架: SSM(Spring,S ...
- 一起学Vue:CRUD(增删改查)
目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...
- Vue.js使用-组件示例(实现数据的CRUD)
1.业务场景 用户(姓名,年龄,性别)的增删改查 2.数据格式 定义字段,name:字段名称,iskey:是否主键(添加,修改数据标志),dataSource:可选列表(下拉框选项) columns: ...
- Vue全局过滤器的使用 运用在时间过滤 内容添加crud
过滤器的使用 msgFormt是你自己定义的过滤器方法, Vue.filter是你自己定义的全局过滤器.没有s 过滤器要有返回值哈 用retuen Vue.filter("msgFo ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- SpringBoot vue
springboot 整合vue就行前后端完全分离,监听器,过滤器,拦截器 https://github.com/ninuxGithub/spring-boot-vue-separateA blog ...
- vue,vuex的后台管理项目架子structure-admin,后端服务nodejs
之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能 接下来,针对structure-admin-web的不足,进行了补充,开发了具有登 ...
- Angular Js 与bootstrap, angular 与 vue.js
今天突然接到电话, 问我他们的区别 虽然平时看了,但是没记住,凉凉是肯定的 总结一下: bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已.an ...
随机推荐
- MyBatis系列(一) MyBatis入门
前言 MyBatis官方文档:https://mybatis.org/mybatis-3/zh/index.html MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由 ...
- SpringBoot与JPA
JPA是什么 JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA ...
- 2018NOIP赛后总结+后阶段信奥学习个人规划
目录 2018NOIP赛后总结 赛前 赛时 赛后 后阶段信奥学习个人规划 主要方针 学习安排 比赛安排 刷题安排 2018NOIP赛后总结 赛前 在无数次的思想挣扎后,我在倒数 3 天的时候请假了.这 ...
- 统计学习方法与Python实现(二)——k近邻法
统计学习方法与Python实现(二)——k近邻法 iwehdio的博客园:https://www.cnblogs.com/iwehdio/ 1.定义 k近邻法假设给定一个训练数据集,其中的实例类别已定 ...
- ARTS-S centos修改hostname
hostnamectl set-hostname newhostname 重启
- MySQL InnoDB 存储引擎原理浅析
注:本文主要基于MySQL 5.6以后版本编写,多数知识来着书籍<MySQL技术内幕++InnoDB存储引擎>,本文章仅记录个人认为比较重要的部分,有兴趣的可以花点时间读原书. 一.MyS ...
- 浅谈Java三大特性
Java三大特性想必大家都不陌生:封装.继承以及多态.很多刚接触Java的小伙伴都会想,它们到底有什么了不得之处,又赋予Java这门编程语言什么魔力呢?今天我们来探讨一下吧~~ 首先,名词解释: 封装 ...
- 改进一条Group By
1.先回顾下基础知识: Group By 对数据分组聚合,常常伴随having使用.having可以处理单记录,也可以小组为单位处理. 语句: SELECT colFROM table[WHERE][ ...
- 搞了一次IE浏览器兼容,我有点奔溃....
浏览器兼容问题(主要时IE上遇到的坑坑坑) caniuse 工具(基本参考作用,实际还是需要测试) (1)安装babel-polyfill基本操作了,IE浏览器没有内置Promise对象,不仅如此,几 ...
- Java开发图片浏览器--记录
效果 设计思路 需求分析 图片浏览,上/下一张,放大缩小等基本功能.可以继续拓展的功能:缩略图.旋转,画笔修改等.此外,缩放实现较为简单,所以会出现失真.设计此类软件功能可参考ACDSee或irfan ...