Vue.js 新手必备：写一个Checklist组件

2024-02-16 19:29:40

前言

Vue.js 作为一款热门的前端框架，以其简单易用、组件化的特点，深受广大开发者的喜爱。如果你是一位 Vue.js 新手，那么学习如何编写一个 Checklist 组件是一个不错的选择。本文将以一个移动端 Checklist 组件为例，详细讲解其编写过程。

准备工作

在开始编写之前，你需要确保已经安装了 Vue.js 及其相关工具。同时，你需要对 CSS 的 Flexbox 布局知识有一定的了解。如果你不熟悉 Flexbox 布局，可以先查阅相关资料或教程。

创建项目

首先，我们需要创建一个新的 Vue.js 项目。你可以使用 Vue CLI 工具来快速创建项目。在命令行中输入以下命令：

vue create checklist-component

这将创建一个名为 checklist-component 的新项目。

创建组件

在项目中，你需要创建一个名为 Checklist.vue 的组件文件。这个文件将包含组件的模板、样式和脚本。

<template>
  <div class="checklist">
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" :id="item.id" @change="toggleItem(item)">
        <label :for="item.id">{{ item.text }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  },
  methods: {
    toggleItem(item) {
      item.completed = !item.completed;
    }
  }
}
</script>

<style>
.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: #efefef;
}

li {
  display: flex;
  align-items: center;
  gap: 12px;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

label {
  font-size: 16px;
}
</style>

使用组件

现在，你已经创建了 Checklist 组件。要使用它，你可以在项目中的任何位置导入该组件。例如，在 App.vue 文件中，你可以这样使用它：

<template>
  <checklist></checklist>
</template>

<script>
import Checklist from './components/Checklist.vue';

export default {
  components: {
    Checklist
  }
}
</script>