vue--CRUD
2024-09-01 08:23:07
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); //按照名字筛选
});
},
},
最新文章
- 自己开发一个 vsts agent 的 task
- 将对象序列化，反序列化到XML
- Atom.io设置ctrl+delete
- linux 下两台电脑之间ssh无密码连接
- flex+java将数据库里的数据导出到指定目录下excel表里(poi)
- python（5）字符串处理 （sub,replace,find,index,upper,strip，split，sub翻页
- HDU 2159 FATE （二维完全背包
- android 如何解决模块之间的通讯的耦合问题
- sql错误代码一览表
- 用纯jsp实现用户的登录、注册与退出
- CacheHelper工具类的使用
- spring+struts2+ibatis 框架整合以及解析
- 【机器学习】支持向量机（SVM）的优化算法——序列最小优化算法（SMO）概述
- Day11 (黑客成长日记) 爬取网站图片
- Linux文本分析命令awk的妙用
- C#将List<>转换为Json，将DataSet转成List<T>
- CentOS 7下搭建配置SVN服务器
- NSDictionary NSMutableDictionary NSSet NSMutableSet
- BZOJ2223 [Coci 2009]PATULJCI
- Software Testing Techniques Homework 1