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

转载于:https://www.cnblogs.com/whyaza/p/11562537.html