VUE3 development introductory tutorial: Using Vue.js components to encapsulate data filters

Vue.js is a popular JavaScript framework, and Vue 3 is its latest version. This article will introduce how to use Vue.js components to encapsulate data filters to help beginners better understand the development process of Vue 3.

Step One: Install Vue.js
To use Vue.js to develop applications, we need to install Vue.js first. You can use npm or yarn to install Vue.js. Enter the following command in the terminal to install.

npm install vue

or

yarn add vue

Step 2: Create a Vue.js application
After installing Vue.js, You need to create a new application. Applications can be created using the Vue CLI tool. Enter the following command in the terminal.

vue create my-app

This will create a new application called my-app. When creating an application, we can also choose to use specific configuration settings. Once the project is created, use the cd command to enter the project.

cd my-app

Now, we can start the project using the following command.

npm run serve

or

yarn serve

Now, the application has been started successfully. Open the browser and enter http://localhost:8080 in the address bar to access.

Step 3: Create the data filter component
Once we have a Vue.js application, we can start creating the data filter component. A data filter will receive data and filter them based on conditions. We will use the following code example to create a data filter component.

<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>

In this code example, we first define a template that contains an input field and a list. We also define a data attribute called filterText, which stores the filter criteria entered by the user.

Next, we define a calculated property called filteredData, which filters data based on filter conditions. This computed property accepts the data property (defined in the props object) as its input and passes it into the filter function. In this computed property, we use the filter() method to filter the data and match based on the name field.

Finally, we set the component as the default export and use it in the parent component.

Step 4: Introduce the data filter component
We have now created a data filter component, which we can introduce into our parent component. We demonstrate how to use the data filter component in the sample code below.

<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>

In this example, we create a data array named items and pass it to the data property of the FilterableList component. Next, we import the FilterableList component into the parent component and set it as a property of the component object. Finally, we use the FilterableList component in the template.

Step Five: Run the Application
Now that we have completed a basic Vue.js data filter component, we can restart the application to see its effect. Type the following command in the terminal:

npm run serve

or

yarn serve

and then open http://localhost:8080 in the browser , you should see a set of items, and a filter input box. Enter anything and the list will be filtered based on the value you enter.

Conclusion
In this article, we learned how to create data filters using Vue.js and components. We used Vue.js' componentized architecture and computed properties to implement the filtering function. This is a very basic Vue.js component that you can improve and extend according to your needs. If you are a Vue.js beginner, this is a great starting point to help you better understand the Vue.js development process.

The above is the detailed content of VUE3 development introductory tutorial: Using Vue.js components to encapsulate data filters. For more information, please follow other related articles on the PHP Chinese website!