使用 Vue.js 构建支持本地储存的简单记事本 SPA

前端

2023-11-18 05:37:32

导读

在当今快节奏的生活中，我们经常需要记录各种信息和任务。传统的纸质备忘录虽然方便，但容易丢失或损坏。而电子备忘录可以帮助我们随时随地记录和管理信息，并避免丢失的风险。

在这篇教程中，我们将使用 Vue.js 构建一个简单的单页应用程序（SPA）记事本，它将支持本地储存，允许用户创建、修改和删除笔记。我们还将提供一个演示链接和 GitHub 仓库，以便您查看和下载源代码。

准备工作

在开始构建我们的记事本 SPA 之前，我们需要确保已经安装了必要的软件和工具。

Node.js 和 npm（用于管理项目依赖）
Vue CLI（用于快速创建和管理 Vue.js 项目）
代码编辑器或 IDE（用于编写和编辑代码）

如果您还没有安装这些软件和工具，请按照官方网站的说明进行安装。

创建 Vue.js 项目

安装好必要软件和工具后，我们可以使用 Vue CLI 来创建一个新的 Vue.js 项目。

npx vue create my-vue-memo

这将创建一个名为 my-vue-memo 的新项目。进入该项目目录并安装依赖项。

cd my-vue-memo
npm install

构建记事本 SPA

接下来，我们将一步一步地构建我们的记事本 SPA。

1. 创建组件

首先，我们需要创建一个 Vue.js 组件，它将包含我们的记事本应用程序。

// src/components/Memo.vue
<template>
  <div>
    <form @submit.prevent="addNote">
      <input type="text" v-model="newNote" placeholder="Add a new note">
      <button type="submit">+</button>
    </form>
    <ul>
      <li v-for="note in notes" :key="note.id">
        <span>{{ note.content }}</span>
        <button @click="deleteNote(note.id)">x</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notes: [],
      newNote: ''
    }
  },
  methods: {
    addNote() {
      if (this.newNote.trim()) {
        this.notes.push({
          id: Date.now(),
          content: this.newNote
        })
        this.newNote = ''
        this.saveNotes()
      }
    },
    deleteNote(id) {
      this.notes = this.notes.filter(note => note.id !== id)
      this.saveNotes()
    },
    saveNotes() {
      localStorage.setItem('notes', JSON.stringify(this.notes))
    }
  },
  created() {
    const notes = JSON.parse(localStorage.getItem('notes'))
    if (notes) {
      this.notes = notes
    }
  }
}
</script>

2. 创建根组件

接下来，我们需要创建一个根组件，它将包含我们的 Memo 组件。

// src/App.vue
<template>
  <div id="app">
    <Memo />
  </div>
</template>

<script>
import Memo from './components/Memo.vue'

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

3. 添加样式

为了让我们的记事本 SPA 看起来更美观，我们可以添加一些样式。

// src/assets/style.css
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

#app {
  padding: 20px;
}

form {
  display: flex;
  align-items: center;
}

input {
  flex: 1;
  padding: 5px;
  margin-right: 10px;
}

button {
  padding: 5px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  padding: 5px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

li span {
  flex: 1;
  margin-right: 10px;
}