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中文網其他相關文章！
