VUE3開發入門教學：使用Vue.js元件封裝資料篩選器

Vue.js是一個流行的JavaScript框架，Vue 3是其最新版本。本文將介紹如何使用Vue.js元件封裝資料篩選器，幫助初學者更能理解Vue 3的開發流程。

第一步：安裝Vue.js
要使用Vue.js開發應用程序，我們需要先安裝Vue.js。你可以使用npm或yarn來安裝Vue.js。在終端機中輸入以下命令即可安裝。

npm install vue

或

yarn add vue

第二步：建立Vue.js應用程式
安裝Vue.js之後，你需要創建一個新的應用程式。可以使用Vue CLI工具來建立應用程式。在終端機中輸入以下命令。

vue create my-app

這將建立一個名為my-app的新應用程式。在建立應用程式時，我們還可以選擇使用特定的配置設定。一旦專案創建完畢，使用cd命令進入該專案。

cd my-app

現在，我們可以使用以下命令啟動專案。

npm run serve

或

yarn serve

現在，應用程式已經成功啟動。開啟瀏覽器並在網址列輸入http://localhost:8080即可存取。

第三步：建立資料篩選器元件
一旦我們擁有了一個Vue.js應用程序，我們就可以開始建立資料篩選器元件。一個資料篩選器將接收資料並根據條件過濾它們。我們將使用以下程式碼範例來建立資料篩選器元件。

<template>
  <div>
    <div>
      <label>Filter:</label>
      <input type="text" v-model="filterText" />
    </div>
    <ul>
      <li v-for="item in filteredData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      filterText: '',
    };
  },
  computed: {
    filteredData() {
      const filterText = this.filterText.toLowerCase();
      return this.data.filter(item => {
        return item.name.toLowerCase().includes(filterText);
      });
    },
  },
};
</script>

在這個程式碼範例中，我們首先定義了一個模板，其中包含一個輸入欄位和一個清單。我們也定義了一個名為filterText的資料屬性，它儲存使用者輸入的篩選條件。

接下來，我們定義了一個名為filteredData的計算屬性，它是基於篩選條件過濾資料。此計算屬性接受data屬性（在props物件中定義）作為其輸入，並將其傳遞到篩選功能中。在這個計算屬性中，我們使用filter()方法來過濾數據，並根據名稱欄位進行匹配。

最後，我們將該元件設定為預設導出並在父元件中使用它。

第四步：引入資料篩選器元件
我們現在已經建立了一個資料篩選器元件，我們可以將它引入我們的父元件中。我們將在下面的範例程式碼中示範如何使用資料篩選器元件。

<template>
  <div>
    <filterable-list :data="items" />
  </div>
</template>

<script>
import FilterableList from './FilterableList.vue';

export default {
  components: {
    FilterableList,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'pear' },
      ],
    };
  },
};
</script>

在這個範例中，我們建立了一個名為items的資料數組，並將其傳遞給FilterableList元件的data屬性。接下來，我們將FilterableList元件匯入到父元件中並將其設定為元件物件的屬性。最後，我們在模板中使用FilterableList元件。

第五步：運行應用程式
現在，我們已經完成了一個基本的Vue.js資料篩選器元件，現在可以重新啟動應用程式以查看它的效果。在終端機中鍵入以下指令：

npm run serve

或

yarn serve

然後在瀏覽器中開啟http://localhost:8080 ，你應該可以看到一組項目，還有一個過濾輸入框。輸入任何內容，清單將會根據你輸入的值被篩選。

結論
在這篇文章中，我們學習如何使用Vue.js和元件來建立資料篩選器。我們使用了Vue.js的元件化架構和計算屬性來實現過濾功能。這是一個非常基本的Vue.js元件，你可以根據自己的需求進行改進和擴充。如果你是一個Vue.js初學者，這是一個很好的起點，可以幫助你更好地理解Vue.js的開發過程。

以上是VUE3開發入門教學：使用Vue.js元件封裝資料篩選器的詳細內容。更多資訊請關注PHP中文網其他相關文章！