vue增刪改查​​功能怎麼實現

在 Vue.js 中實作增刪改查功能：建立：使用 v-model 綁定數據，向伺服器發送 POST 請求建立新記錄。讀取：向伺服器發送 GET 請求獲取資料。更新：使用 v-model 編輯數據，向伺服器發送 PUT 請求更新記錄。刪除：向伺服器傳送 DELETE 請求刪除記錄。

Vue 中實作增刪改查功能

##增刪改查（CRUD）是Web 應用程式中的基本操作，它可以讓我們在資料庫中建立、讀取、更新和刪除資料。在 Vue.js 中實作 CRUD 功能相對簡單。

建立

建立新記錄時，我們將使用

v-model 雙向綁定資料並向伺服器發出 POST 請求。例如：

<code class="html"><template>
  <form @submit.prevent="createItem">
    <input v-model="newItem.name" />
    <button type="submit">Create</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '' }
    }
  },
  methods: {
    createItem() {
      // 向服务器发送 POST 请求
      axios.post('/items', this.newItem).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script></code>

讀取

讀取資料時，我們將向伺服器發出 GET 請求。例如：

<code class="html"><template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    // 在组件挂载时向服务器发送 GET 请求
    axios.get('/items').then((response) => {
      this.items = response.data
    })
  }
}
</script></code>

更新

更新記錄時，我們將使用

v-model 編輯資料並向伺服器發出 PUT 請求。例如：

<code class="html"><template>
  <form @submit.prevent="updateItem">
    <input v-model="item.name" />
    <button type="submit">Update</button>
  </form>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    updateItem() {
      // 向服务器发送 PUT 请求
      axios.put(`/items/${this.item.id}`, this.item).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script></code>

刪除

刪除記錄時，我們將向伺服器發出 DELETE 請求。例如：

<code class="html"><template>
  <button @click="deleteItem">Delete</button>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    deleteItem() {
      // 向服务器发送 DELETE 请求
      axios.delete(`/items/${this.item.id}`).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script></code>

以上是vue增刪改查​​功能怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！