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); //按照名字筛选
});
},
},