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的更多相关文章

  1. elementui入门

    1.前端服务器搭建 (1)创建一个static web project (2) 安装 npm install -g vue-cli (3) vue init webpack 项目名 (4)cd 项目名 ...

  2. 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’ ...

  3. SSM + VUE 实现简单的 CRUD

    一.项目分析 1.需求 (1)使用 ssm + vue 实现一个crud(数据库增删改查)的简单实现.(2)前后端分离,前端页面展示+后台管理. 2.技术点 (1)基础框架: SSM(Spring,S ...

  4. 一起学Vue:CRUD(增删改查)

    目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...

  5. Vue.js使用-组件示例(实现数据的CRUD)

    1.业务场景 用户(姓名,年龄,性别)的增删改查 2.数据格式 定义字段,name:字段名称,iskey:是否主键(添加,修改数据标志),dataSource:可选列表(下拉框选项) columns: ...

  6. Vue全局过滤器的使用 运用在时间过滤 内容添加crud

    过滤器的使用 msgFormt是你自己定义的过滤器方法, Vue.filter是你自己定义的全局过滤器.没有s 过滤器要有返回值哈 用retuen     Vue.filter("msgFo ...

  7. 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 的目的是 ...

  8. SpringBoot vue

    springboot 整合vue就行前后端完全分离,监听器,过滤器,拦截器 https://github.com/ninuxGithub/spring-boot-vue-separateA blog ...

  9. vue,vuex的后台管理项目架子structure-admin,后端服务nodejs

    之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能 接下来,针对structure-admin-web的不足,进行了补充,开发了具有登 ...

  10. Angular Js 与bootstrap, angular 与 vue.js

    今天突然接到电话, 问我他们的区别  虽然平时看了,但是没记住,凉凉是肯定的 总结一下: bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已.an ...

随机推荐

  1. 使用python实现http服务器

    主要使用python实现了一个http服务器.http服务器实现了用户的注册和登录的简单功能,当然还可以继续扩展. 数据的存储使用的是文件,有兴趣的话可以使用数据库进行存储.当然根据个人兴趣而定. 本 ...

  2. Hadoop 维护总结

    1. 启动 history ./sbin/mrjobhistorydaemon.sh start historyserver ./sbin/yarn-daemon.sh start proxyserv ...

  3. org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'ExtractAbstractServiceHandler' is defined

    在利用 Spring 集成 thrift 时,报错如下: javax.servlet.ServletException: Servlet.init() for servlet search-nlp-s ...

  4. 使用 nginx 实现虚拟主机

    当多个系统需要部署的时候,有系统访问很小,为了节省成本,就需要将多个系统部署到同一台服务器上,怎么在同一台服务器上,完成不同系统的部署和访问,就需要使用虚拟主机实现. 使用端口实现虚拟主机 配置 ng ...

  5. 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 ...

  6. CodeForces1006F-Xor-Paths

    F. Xor-Paths time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...

  7. Orleans 初接触(一) 入门例子

    [返回导航] 在简单了解了Orleans 之后我们可以通过几个例子去加深印象 一.Orleans入门例子 这个例子是跟着<Orleans入门例子>(https://www.cnblogs. ...

  8. Python3、setuptools、Pip3安装详解

    Python3.setuptools.Pip3安装详解 2017年08月19日 18:58:47 安静的技术控 阅读数:26002    版权声明:本文为博主原创文章,未经博主允许不得转载. http ...

  9. ORACLE存储过程详解

    1.定义 所谓存储过程(Stored Procedure),就是一组用于完成特定数据库功能的SQL语句集,该SQL语句集经过编译后存储在数据库系统中.在使用时候,用户通过指定已经定义的存储过程名字并给 ...

  10. ansible 基础命令

    ansible 命令总结 1. Ad-HOC: 适合临时执行任务2. Playbook: 适合一些复杂的部署和配置环境 一 . Ad-HOC: 适合临时执行任务ansible-doc -l 查看ans ...