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