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 ...
随机推荐
- 使用python实现http服务器
主要使用python实现了一个http服务器.http服务器实现了用户的注册和登录的简单功能,当然还可以继续扩展. 数据的存储使用的是文件,有兴趣的话可以使用数据库进行存储.当然根据个人兴趣而定. 本 ...
- Hadoop 维护总结
1. 启动 history ./sbin/mrjobhistorydaemon.sh start historyserver ./sbin/yarn-daemon.sh start proxyserv ...
- org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'ExtractAbstractServiceHandler' is defined
在利用 Spring 集成 thrift 时,报错如下: javax.servlet.ServletException: Servlet.init() for servlet search-nlp-s ...
- 使用 nginx 实现虚拟主机
当多个系统需要部署的时候,有系统访问很小,为了节省成本,就需要将多个系统部署到同一台服务器上,怎么在同一台服务器上,完成不同系统的部署和访问,就需要使用虚拟主机实现. 使用端口实现虚拟主机 配置 ng ...
- HDU3247 Resource Archiver (AC自动机+spfa+状压DP)
Great! Your new software is almost finished! The only thing left to do is archiving all your n resou ...
- CodeForces1006F-Xor-Paths
F. Xor-Paths time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...
- Orleans 初接触(一) 入门例子
[返回导航] 在简单了解了Orleans 之后我们可以通过几个例子去加深印象 一.Orleans入门例子 这个例子是跟着<Orleans入门例子>(https://www.cnblogs. ...
- Python3、setuptools、Pip3安装详解
Python3.setuptools.Pip3安装详解 2017年08月19日 18:58:47 安静的技术控 阅读数:26002 版权声明:本文为博主原创文章,未经博主允许不得转载. http ...
- ORACLE存储过程详解
1.定义 所谓存储过程(Stored Procedure),就是一组用于完成特定数据库功能的SQL语句集,该SQL语句集经过编译后存储在数据库系统中.在使用时候,用户通过指定已经定义的存储过程名字并给 ...
- ansible 基础命令
ansible 命令总结 1. Ad-HOC: 适合临时执行任务2. Playbook: 适合一些复杂的部署和配置环境 一 . Ad-HOC: 适合临时执行任务ansible-doc -l 查看ans ...