JavaScript >> Javascript 文檔 >  >> JavaScript

Vue 教程:概述和演練

我們正處於 JavaScript 庫和框架的黃金時代。越來越多的公司正在構建完整的、動態的 Web 應用程序來補充或代替傳統的桌面應用程序。這意味著事情在不斷變化,框架正在流行和過時,但我們試圖完成的核心概念仍然相似。

之前,我寫了一個 React 入門指南,幫助了很多初學者和中級開發人員。 Vue.js 將與 React 正面交鋒以在 JavaScript 開發人員中流行,所以我想為那些也想學習 Vue 的人提供同樣簡單明了的介紹。讓我們開始吧!

先決條件

  • 了解 HTML 和 CSS
  • 基本的 JavaScript 知識
  • 熟悉 ES6+ 特性和語法
  • 全局安裝 Node.js 和 npm(或 yarn)
  • 熟悉 REST API 會有所幫助,但我們會復習。

目標

我們將使用 Vue 創建一個小型應用程序。該應用程序將是一個簡單的員工數據庫,我們將學習:

  • 如何設置 Vue
  • 解剖 一個 Vue 文件
  • 如何使用數據、方法、條件語句和事件 在 Vue 中
  • 如何創建、更新、查看和刪除 系統中的用戶(員工)
  • 如何進行 API 調用 對於上述每一項操作
  • 如何使用表格、表格 ,並形成驗證
  • 如何在 GitHub 頁面上託管 Vue 構建

我創建了一個現場演示並將源代碼放在 GitHub 上。

  • 查看演示
  • 查看源代碼

(您也可以在 CodeSandbox 上查看演示。)

什麼是 Vue?

  • Vue(或 Vue.js)是一個開源的前端 JavaScript 框架
  • Vue 是 視圖 MVC 應用程序的層(模型視圖控制器)
  • Vue 是目前最流行的 JavaScript 庫/框架之一
  • 與其他流行的 JavaScript 項目不同,Vue 沒有像 React (Facebook) 或 Angular (Google) 這樣的大公司提供支持。 Vue 最初由 Evan You 和開源社區編寫。

設置和安裝

設置 Vue 的主要方法有兩種——在 Node 項目中,或者直接注入到靜態 HTML 文件中。我首先想看看在 HTML 文件中設置 Vue,因為它是最簡單的設置和介紹。那些只使用過像 jQuery 這樣的庫的人會最熟悉這種方法。如果您已經使用過 React 或其他 JavaScript 框架,請隨時跳到下一節。

我們可以只創建一個基本的 HTML 文件並在頭部添加一個指向 Vue CDN 的鏈接,然後創建一個 <div> id 為 app .

靜態 HTML 文件

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Vue App</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

我們可以使用 Vue 創建一個簡單的“Hello World”。使用雙括號,我們將渲染 messageapp .在 <script> 標籤,我們將鏈接數據和 DOM。我們新建一個Vue , 和 message data 上的屬性 將被渲染。

index.html
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Vue App</title>
  </head>

  <body>
    <div id="app">{{message}}</div>

    <script>
      const App = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!',
        },
      })
    </script>
  </body>
</html>

我們可以看到數據渲染。

在這一點上,它不是很令人印象深刻,它是你將在文檔介紹中學到的東西,但它讓你明白了 Vue 只是 JavaScript 的重點,沒有必要對 Node、Babel、Webpack 感到緊張,等等。

Vue CLI

更多時候,您不會將 Vue 注入靜態 HTML 文件,但您將利用 Node 生態系統。我們可以做到這一點的最簡單方法是 vue Vue CLI,或 Vue 命令行界面。如先決條件所述,您應該熟悉 Node 和 npm/yarn 以及如何使用本地和全局包。

首先,我們將安裝 Vue CLI。

# install with npm
npm i -g @vue/cli @vue/cli-service-global

# install with yarn
yarn global add @vue/cli @vue/cli-service-global

現在我們已經全局安裝了 Vue CLI,我們可以使用 vue 隨地指揮。我們將使用 vue create 來啟動一個新項目。

vue create vue-app

您可以選擇默認或手動,我們可以選擇默認。

Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

完成後,您可以轉到已創建的新應用和 serve 運行開發服務器。

cd vue-app
npm run serve
# or
yarn serve

完成後,您可以導航到 http://localhost:8080/ 查看默認頁面。

至此,您已經準備好使用 Vue。如果您使用的是 Visual Studio Code,請安裝 Vetur 插件以進行語法高亮、格式化等。

Vue 開發工具

在使用 Vue 時,工具帶中的最後一件事是 Vue DevTools。它是常規 DeveloperTools 的附加組件,它將向您顯示有關組件的所有信息 - 它們的狀態、方法等。

  • Chrome 上的 Vue 開發工具
  • FireFox 上的 Vue 開發工具

入門

恭喜,你們都準備好了!你有一個新的 Vue 樣板應用程序。在項目文件中,您有一個 public 包含 index.html 的文件夾 , 和一個 src main.js 的文件夾 作為入口點。我們被介紹到 .vue 文件,使用 HelloWorld.vueApp.vue 組件。

入口點

main.js ,我們引入了 Vue 並在 index.html 中將 App 渲染到我們的 app div .此文件無需更改。

src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: (h) => h(App),
}).$mount('#app')

Vue 文件剖析

我們製作的任何其他內容都將是 .vue 文件,它總是由三樣東西組成:

  • <template>
  • <script>
  • <style>

看起來像這樣:

example.vue
<template></template>

<script>
  export default {
    name: 'component-name',
  }
</script>

<style scoped></style>

這對你來說可能看起來很奇怪,就像一開始對我一樣。我最初學習前端編碼的重點是 HTML、CSS 和 JavaScript 的關注點分離,在這裡我們將這三者放在一起。然而 JavaScript 和我們設計應用程序的方式已經發展,將我們的樣式、視圖和組件耦合在一起通常被認為是一種優勢並提高了可維護性。

組件的數據和邏輯在 <script> 標籤,但只有 name 是必須的。 <style> 標籤只是CSS。我們的優勢是能夠限定 CSS 的範圍,因此它只適用於這個組件,而不是全局的 scoped 屬性。

現在讓我們開始實際構建這個應用程序。

與往常一樣,本教程是關於功能的,而不是樣式,所以我將在 index.html 中鏈接到 Primitive UI 文件添加一些簡單的默認樣式。

<link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css" />

創建組件

創建一個名為 EmployeeTable.vue 的文件 在 src/components .我們將在這裡創建一個包含一些靜態數據的表。

src/components/EmployeeTable.vue
<template>
  <div id="employee-table">
    <table>
      <thead>
        <tr>
          <th>Employee name</th>
          <th>Employee email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Richard Hendricks</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Bertram Gilfoyle</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Dinesh Chugtai</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'employee-table',
  }
</script>

<style scoped></style>

在 Vue 中,約定是文件名和導入將在 PascalCase 中,例如 EmployeeTable , 但是在模板中使用時,這將轉換為 kebab-case, <employee-table> .這分別使用了 JavaScript 和 HTML 的正確約定。

我們正在導出 EmployeeTable 並將其導入 App.vue .在我們的 import ,我們可以使用 @ 引用 src 文件夾。 App.vue 通過 components 知道它可以使用哪些組件 財產。必須在此處添加所有導入的組件。我還添加了一些全局樣式。

src/App.vue
<template>
  <div id="app" class="small-container">
    <h1>Employees</h1>

    <employee-table />
  </div>
</template>

<script>
  import EmployeeTable from '@/components/EmployeeTable.vue'

  export default {
    name: 'app',
    components: {
      EmployeeTable,
    },
  }
</script>

<style>
  button {
    background: #009435;
    border: 1px solid #009435;
  }

  .small-container {
    max-width: 680px;
  }
</style>

這就是我們目前所擁有的。

我們想重構它以使用數組和對象形式的數據,而不是將我們所有的值硬編碼到表中。所以讓我們添加一個 data() 方法,並返回一個 employees 大批。我們還將為每一個添加 ID 以使其具有唯一性。

應用程序.vue
import EmployeeTable from '@/components/EmployeeTable.vue'

export default {
  name: 'app',
  components: {
    EmployeeTable,
  },
  data() {
    return {
      employees: [
        {
          id: 1,
          name: 'Richard Hendricks',
          email: '[email protected]',
        },
        {
          id: 2,
          name: 'Bertram Gilfoyle',
          email: '[email protected]',
        },
        {
          id: 3,
          name: 'Dinesh Chugtai',
          email: '[email protected]',
        },
      ],
    }
  },
}

現在我們在 App.vue 上有了這些數據 ,但我們想將它傳遞給 EmployeeTable .我們可以通過將數據作為屬性向下傳遞來做到這一點。以冒號 : 開頭的屬性 將允許您傳遞數據。更詳細的版本是 v-bind .在這種情況下,我們將傳遞我們的 employees 數組。

<employee-table :employees="employees" />

<!-- this is the same thing -->
<employee-table v-bind:employees="employees" />

現在在 EmployeeTable 一方面,我們想要檢索該數據,所以我們告訴組件它將接收道具,在本例中為 Array .

EmployeeTable.vue
export default {
  name: 'employee-table',
  props: {
    employees: Array,
  },
}

循環

現在我們有了數據,我們想要遍歷數據並相應地顯示 DOM 節點。我們將使用 v-for 屬性。現在我們可以檢索 employeesEmployeeTable ,我們將為每位員工顯示一個表格行。

EmployeeTable.vue
<template>
  <div id="employee-table">
    <table>
      <!-- ...thead... -->
      <tbody>
        <tr v-for="employee in employees" :key="employee.id">
          <td>{{ employee.name }}</td>
          <td>{{ employee.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

Vue(如 React)要求唯一標識數組中的任何元素,因此我們將使用 :key 在表格行上並將其設置為唯一值。

現在我們的表從視圖角度沒有改變,但它現在設置為更有效地處理數據。

使用表單

現在我們成功地完成了 CRUD 應用程序的“讀取”部分,但接下來最重要的事情是添加創建新員工的能力。我們將創建一個添加員工表單。

製作 EmployeeForm.vue 並設置一個字段來輸入姓名、電子郵件和提交按鈕。我將繼續創建一個 employee name 的數據屬性 和 email 就可以了。

src/components/EmployeeForm.vue
<template>
  <div id="employee-form">
    <form>
      <label>Employee name</label>
      <input type="text" />
      <label>Employee Email</label>
      <input type="text" />
      <button>Add Employee</button>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'employee-form',
    data() {
      return {
        employee: {
          name: '',
          email: '',
        },
      }
    },
  }
</script>

<style scoped>
  form {
    margin-bottom: 2rem;
  }
</style>

我們還需要將其添加到 App.vue

src/components/App.vue
<template>
  <div id="app" class="small-container">
    <h1>Employees</h1>

    <employee-form />
    <employee-table :employees="employees" />
  </div>
</template>

<script>
  import EmployeeTable from '@/components/EmployeeTable.vue'
  import EmployeeForm from '@/components/EmployeeForm.vue'

  export default {
    name: 'app',
    components: {
      EmployeeTable,
      EmployeeForm,
    },
    data: {
      // ...
    },
  }
</script>

現在我們必須弄清楚如何將我們在輸入中寫入的數據轉換為 Vue 的組件狀態。為此,我們將使用 v-model . v-model 是一些內置的 Vue 語法糖,用於使用 onchange 事件更新輸入值。

EmployeeForm.vue
<template>
  <div id="employee-form">
    <form>
      <label>Employee name</label>
      <input v-model="employee.name" type="text" />
      <label>Employee Email</label>
      <input v-model="employee.email" type="text" />
      <button>Add Employee</button>
    </form>
  </div>
</template>

現在您已經添加了這個,您可以在 Vue DevTools 中看到組件的狀態發生了變化。我們只需要提交這些值並使用新的員工對象更新父(App)狀態。

事件監聽器

我們想做一個 onsubmit 表單上的事件。我們可以用 v-on:submit 做到這一點 , 或 @submit 簡而言之。此約定與 @click 相同 /v-on:click 或任何其他類似事件。 submit event 也有一個方便的 prevent 我們可以加進去,和放event.preventDefault()一樣 在提交函數中,因為我們不會使用表單提供的默認 GET/POST 方法。

讓我們將其添加到表單中,並引用 handleSubmit 我們要做的方法。

EmployeeForm.vue
<form @submit.prevent="handleSubmit"></form>

方法

現在我們要在一個組件上創建我們的第一個方法。 data()下方 ,我們可以創建一個methods 對象,它將包含我們創建的所有自定義方法。讓我們添加 handleSubmit 在那裡。

EmployeeForm.vue
export default {
  name: 'employee-form',
  data() {
    return {
      employee: {
        name: '',
        email: '',
      },
    }
  },
  methods: {
    handleSubmit() {
      console.log('testing handleSubmit')
    },
  },
}

向父級發送事件

現在,如果您嘗試提交表單,您將看到控制台中記錄的消息。我們知道表單提交方法工作正常,所以我們可以將數據傳遞到 App 現在。我們將使用 $emit 執行此操作 .

Emit 向其父組件廣播事件名稱和數據,就像這樣。

this.$emit('name-of-emitted-event', dataToPass)

在我們的例子中,我們將創建一個名為 add:employee 的事件 , 並通過 this.employee .

EmployeeForm.vue
handleSubmit() {
  this.$emit('add:employee', this.employee)
}

添加後,單擊添加表單按鈕並轉到 Vue DevTools。您會看到一個新事件的通知,它會告訴您名稱、來源和有效負載,在本例中是我們創建的一個對象。

從孩子那裡檢索事件

現在 employee-form 正在廣播其發出的事件,但我們需要在父級中捕獲事件和值才能使用它。

我們需要做的第一件事是製作 employee-form 確認並處理髮出的事件,並調用一個新方法。它看起來像這樣:

<component @name-of-emitted-event="methodToCallOnceEmitted"></component>

所以讓我們把它添加到 App.vue .

App.vue
<employee-form @add:employee="addEmployee" />

現在我們只需要創建 addEmployee App.vue 上的方法 ,它將通過向其添加新項目來修改員工數組。基本上看起來像這樣:

App.vue
methods: {
  addEmployee(employee) {
    this.employees = [...this.employees, employee]
  }
}

因為我必須製作一個 id 同樣,我將編寫一些代碼來根據數組中的項目數獲取新員工 ID。請注意,在真實數據庫中,此 ID 將唯一生成或自動遞增。

addEmployee(employee) {
  const lastId =
    this.employees.length > 0
      ? this.employees[this.employees.length - 1].id
      : 0;
  const id = lastId + 1;
  const newEmployee = { ...employee, id };

  this.employees = [...this.employees, newEmployee];
}

現在有了這個,您可以添加新員工。請注意,新員工不會持久化,因為它只是前端並且沒有連接到數據庫。

基本表單驗證

這在技術上是可行的,但我們可以稍微清理一下。我們想...

  • 如果一切順利,則顯示成功消息
  • 如果缺少某些內容,則顯示錯誤消息
  • 突出顯示包含無效數據的輸入
  • 在表單正確提交後清除輸入,並且
  • 提交成功後關注輸入中的第一項

計算屬性

在 Vue 中,我們可以使用計算屬性,它們是在發生變化時自動計算的函數。這樣我們就可以避免將復雜的邏輯放在 Vue 模板本身中。我只是要進行基本檢查,以確保兩個字段的字段都不為空。

EmployeeForm.vue
computed: {
  invalidName() {
    return this.employee.name === ''
  },

  invalidEmail() {
    return this.employee.email === ''
  },
},

為了設置這一切,我將添加一個 submitting state,檢查表單當前是否正在提交,一個 error 說明是否出現問題,以及 success 說明是否順利通過。

EmployeeForm.vue
data() {
  return {
    submitting: false,
    error: false,
    success: false,
    employee: {
      name: '',
      email: '',
    }
  }
}

提交函數會先清除是否successerror 設置完畢,開始提交。它將檢查我們的計算屬性,如果其中一個為真,則返回 error 將被設置。如果沒有,我們可以提交,並將所有狀態設置回默認值。

EmployeeForm.vue
methods: {
  handleSubmit() {
    this.submitting = true
    this.clearStatus()

    if (this.invalidName || this.invalidEmail) {
      this.error = true
      return
    }

    this.$emit('add:employee', this.employee)
    this.employee = {
      name: '',
      email: '',
    }
    this.error = false
    this.success = true
    this.submitting = false
  },

  clearStatus() {
    this.success = false
    this.error = false
  }
}

由於我們需要一條錯誤消息和一條成功消息,因此我將為此設置 CSS。

EmployeeForm.vue
<style scoped>
  form {
    margin-bottom: 2rem;
  }

  [class*='-message'] {
    font-weight: 500;
  }

  .error-message {
    color: #d33c40;
  }

  .success-message {
    color: #32a95d;
  }
</style>

最後,我們將設置表單。如果表單正在提交並且其中一個計算屬性無效,我們要設置一個 has-error 關於輸入的類。使用 :class= 確保該類將被視為 JavaScript 而不是純字符串。我們可以確保在焦點和按鍵事件上清除狀態,並在底部相應地顯示成功和錯誤消息。

EmployeeForm.vue
<form @submit.prevent="handleSubmit">
  <label>Employee name</label>
  <input
    type="text"
    :class="{ 'has-error': submitting && invalidName }"
    v-model="employee.name"
    @focus="clearStatus"
    @keypress="clearStatus"
  />
  <label>Employee Email</label>
  <input
    type="text"
    :class="{ 'has-error': submitting && invalidEmail }"
    v-model="employee.email"
    @focus="clearStatus"
  />
  <p v-if="error && submitting" class="error-message">❗Please fill out all required fields</p>
  <p v-if="success" class="success-message">✅ Employee successfully added</p>
  <button>Add Employee</button>
</form>

條件

你會注意到一個 v-if 財產。這是 Vue 中的條件。在這種情況下,<p> 只有條件為真時才會顯示元素。

還有一個v-else-if , 和 v-else 屬性,其工作方式與原版 JS 相同。

現在已經完成了,我們可以看到這些條件渲染的元素。這是缺少字段的錯誤消息。

這是成功的消息。

添加參考

我們還可以再做一個小的改進。提交表單後,如果焦點回到第一個項目上,這樣可以輕鬆添加許多項目而無需單擊周圍。我們可以使用 refs 來做到這一點,我們可以使用它來定位特定元素。

我們可以在第一個輸入中添加一個 ref...

EmployeeForm.vue
<input ref="first" ... />

還有 focushandleSubmit 中提交表單後的那個 ref .

EmployeeForm.vue
this.$emit('add:employee', this.employee)
this.$refs.first.focus()

現在提交後,焦點將自動轉到表單中的第一個字段。 @keypress clearStatus 的事件 我們之前添加的內容將確保您開始輸入後成功或錯誤消息消失。

刪除項目

現在表格已經完成,我們必須完成表格上的其他操作 - 編輯和刪除。我們先從刪除開始,這樣操作更簡單。

首先,我們將更新表格以具有“操作”行,並添加用於編輯和刪除的按鈕。

EmployeeTable.vue
<template>
  <div id="employee-table">
    <table>
      <thead>
        <tr>
          <th>Employee name</th>
          <th>Employee email</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="employee in employees" :key="employee.id">
          <td>{{ employee.name }}</td>
          <td>{{ employee.email }}</td>
          <td>
            <button>Edit</button>
            <button>Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
  button {
    margin: 0 0.5rem 0 0;
  }
</style>

我們將像以前一樣發出一個事件,這次稱為 deleteEmployee .我們可以通過 id 員工作為有效載荷。

EmployeeTable.vue
<button @click="$emit('delete:employee', employee.id)">Delete</button>

返回 App.vue ,我們要告訴employee-tabledelete-employee 執行操作 ...

App.vue
<employee-table :employees="employees" @delete:employee="deleteEmployee" />

我們將過濾掉刪除的行。

App.vue
methods: {
  addEmployee(employee) {...},
  deleteEmployee(id) {
    this.employees = this.employees.filter(
      employee => employee.id !== id
    )
  }
}

現在您會注意到您可以刪除項目。讓我們在沒有員工的情況下添加一條消息。

EmployeeTable.vue
<div id="employee-table">
  <p v-if="employees.length < 1" class="empty-table">No employees</p>
  <table v-else>
    ...
  </table>
</div>

我們現在可以成功添加和刪除員工了。

編輯項目

編輯比刪除要復雜一些。 App.vue 的設置 不過很簡單,所以我們先做那個。只需添加 edit:employee 我們將要舉辦的活動:

App.vue
<employee-table
  :employees="employees"
  @delete:employee="deleteEmployee"
  @edit:employee="editEmployee"
/>

並創建 editEmployee 方法,將採用 idupdatedEmployee 參數,通過employees映射 數組,並更新正確的員工。

App.vue
editEmployee(id, updatedEmployee) {
  this.employees = this.employees.map(employee =>
    employee.id === id ? updatedEmployee : employee
  )
}

很簡單。

現在回到 EmployeeTable.vue ,我們基本上想要創建一個在按下按鈕時啟用的“編輯模式”。

EmployeeTable.vue
<button @click="editMode(employee.id)">Edit</button>

我們將創建一個 editing 將設置為 id 的狀態 editMode 時當前正在編輯的行的 已啟用。 EmployeeTable 將擁有自己的本地 editEmployee 方法,它發出 edit:employeeApp 如果字段不為空,則重置 editing 狀態。

EmployeeTable.vue
data() {
  return {
    editing: null,
  }
},
methods: {
  editMode(id) {
    this.editing = id
  },

  editEmployee(employee) {
    if (employee.name === '' || employee.email === '') return
    this.$emit('edit:employee', employee.id, employee)
    this.editing = null
  }
}

這是表格行的當前狀態 - 我們只是顯示值。

<tr v-for="employee in employees" :key="employee.id">
  <td>{{ employee.name }}</td>
  <td>{{ employee.email }}</td>
  <td>
    <button @click="editMode(employee.id)">Edit</button>
    <button @click="$emit('delete:employee', employee.id)">Delete</button>
  </td>
</tr>

為了使其可編輯,我們將檢查 editing === employee.id 對特定行為真,並改為顯示和輸入。我們還將添加一個取消按鈕,通過將其設置為 null 來取消編輯。

<tr v-for="employee in employees" :key="employee.id">
  <td v-if="editing === employee.id">
    <input type="text" v-model="employee.name" />
  </td>
  <td v-else>{{employee.name}}</td>
  <td v-if="editing === employee.id">
    <input type="text" v-model="employee.email" />
  </td>
  <td v-else>{{employee.email}}</td>
  <td v-if="editing === employee.id">
    <button @click="editEmployee(employee)">Save</button>
    <button class="muted-button" @click="editing = null">Cancel</button>
  </td>
  <td v-else>
    <button @click="editMode(employee.id)">Edit</button>
    <button @click="$emit('delete:employee', employee.id)">Delete</button>
  </td>
</tr>

現在我可以一次編輯一行了!

編輯工作,但您仍然無法取消使用此代碼更新的狀態,即使新值未發送到 API 調用。我們將創建 cancelEdit ,並使取消按鈕調用 @click="cancelEdit(employee)" 並刪除 .id 從編輯按鈕。我們將創建一個可以返回的緩存員工。

editMode(employee) {
  this.cachedEmployee = Object.assign({}, employee)
  this.editing = employee.id
},
cancelEdit(employee) {
  Object.assign(employee, this.cachedEmployee)
  this.editing = null;
}

至此,該應用在技術上已經完成,但真正的生產應用可能會對後端數據庫進行 API 調用,因此我們將製作它的模擬版本。

進行異步 REST API 調用

我們將使用 JSON 佔位符來進行虛假 API 調用,這將給我們真正的響應。我們可以GET 值(例如,訪問 https://jsonplaceholder.typicode.com/users 以查看 users 我們將使用 JSON),我們可以製作 POST , PUT , 和 DELETE 要求。這些請求不會保留在真實的數據庫中,因為它們是用於示例目的。

帶有 async/await 的異步方法看起來像這樣,使用 try/catch 塊。

async asynchronousMethod() {
  try {
    const response = await fetch('url')
    const data = await response.json()

    // do something with `data`
  } catch (error) {
    // do something with `error`
  }
}

所以此時,我將用 async 替換我們所有的 CRUD 方法 方法,並通過API和前端更新數據。

生命週期方法

使用 GET,我們希望刪除 employees 中的所有預填充數據 數組,並將其替換為 API 中的數據。我們稱之為 GETmounted 生命週期方法。

mounted 告訴我們的組件在組件實際插入到 DOM 後執行操作。這是從 API 顯示數據的常用方法。 (有些使用 created 此任務的生命週期。)

App.vue
export default {
  name: 'app',
  components: {
    EmployeeTable,
    EmployeeForm,
  },
  data() {
    return {
      employees: [],
    }
  },

  mounted() {
    this.getEmployees()
  },
}

因此,現在我們可以使用異步 API 調用等效項更新所有 CRUD 方法。

GET

檢索資源。

App.vue
async getEmployees() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    const data = await response.json()
    this.employees = data
  } catch (error) {
    console.error(error)
  }
}

POST

創建一個新資源(非冪等)。

App.vue
async addEmployee(employee) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST',
      body: JSON.stringify(employee),
      headers: { 'Content-type': 'application/json; charset=UTF-8' },
    })
    const data = await response.json()
    this.employees = [...this.employees, data]
  } catch (error) {
    console.error(error)
  }
}

PUT

更新現有資源(冪等)。

App.vue
async editEmployee(id, updatedEmployee) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedEmployee),
      headers: { 'Content-type': 'application/json; charset=UTF-8' },
    })
    const data = await response.json()
    this.employees = this.employees.map(employee => (employee.id === id ? data : employee))
  } catch (error) {
    console.error(error)
  }
}

刪除

刪除現有資源。

App.vue
async deleteEmployee(id) {
  try {
    await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
      method: "DELETE"
    });
    this.employees = this.employees.filter(employee => employee.id !== id);
  } catch (error) {
    console.error(error);
  }
}

好的,所有 API 調用都應該正常工作,我們從 JSON 佔位符獲取數據,而不是我們自己的靜態數據。

該應用程序已完成!您可以查看現場演示或查看源代碼。

將構建部署到 GitHub Pages

您可能希望將新完成的應用程序部署到 GitHub 頁面,這是一個靜態站點主機。假設您已經創建了一個存儲庫並提交給 master,使用以下步驟...

git remote add origin https://github.com/username/vue-app
git add .
git commit -m "initial commit"
git push -u origin master

您可以通過以下步驟提交構建:

創建一個 gh-pages 分支。

git checkout -b gh-pages

刪除 dist .gitignore 的目錄 .

創建 vue.config.js 並添加 publicPath 你的 GitHub

vue.config.js
module.exports = {
  publicPath: 'vue-app',
}

創建一個構建,它將輸出 dist 文件夾。

npm run build
# or
yarn build

添加構建、提交並將其發送到 gh-pages 在 GitHub 上。

git add dist
git commit -m "gh-pages commit"
git subtree push --prefix dist origin gh-pages

在一兩分鐘內,它應該全部託管!

結論

哇,那太多了。我們了解了 Vue 是什麼,如何通過靜態 HTML 或 Vue Cli 設置 Vue 項目,以及如何在 Vue 中製作完整的 CRUD 應用程序。我們了解了 Vue 組件、數據、方法、計算方法、生命週期、條件、事件、表單處理和構建。如果您通讀並完成了整個教程,那麼在 Vue 中從頭開始構建自己的應用程序應該會感覺很好。

從這裡開始,您可能想研究 Vuex 的狀態管理(類似於 React 的 Redux)和 Vue Router 的前端路由(類似於 React Router DOM)。 Vue 環境的一大優點是它的電池是可選的,但如果您需要,也包括官方電池。

創建這個應用程序和教程需要做很多工作,如果你喜歡它,我希望你與任何你認為可能會從中受益的人分享!如果您發現任何錯誤,請告訴我。

  • 查看源代碼
  • 查看演示

Tutorial JavaScript 教程
  1. JavaScript 刪除對象屬性 |示例代碼

  2. JavaScript 打印數組到控制台 |示例代碼

  3. React 組件是如何工作的?

  4. Material Tailwind – 面向 Web 開發人員的新框架

  5. [討論] React 中的狀態管理

  6. 只需 4 行代碼即可將您的應用連接到 Microsoft 365

  7. 使用谷歌瀏覽器調試和編輯嵌入在 HTML 頁面中的 javascript

  1. Electron 又快又輕

  2. 一個超級簡單的無限滾動實現

  3. 在 AngularJS 中管理僅客戶端狀態

  4. 用戶從提示中選擇某些數字

  5. 使用 Docker、AWS CodeBuild、AWS ECS、AWS CodePipeline 和 Github 為容器化 React 應用程序設置 CI/CD

  6. 如何使用 JavaScript 中的 fetch() 方法獲取網站的完整 HTML?

  7. Babel 不編譯供應商夾頭

  1. 伍夫VS。 Meow:數據獲取和 React 組件生命週期

  2. 2021 年使用的 React 庫:17 個首選

  3. 計算數組中的重複項 JavaScript |示例代碼

  4. 使用 jQuery 捕獲垂直滾動百分比