Vue.js 2 项目实战：综合案例-小黑记事本

以下是一个简化的小黑记事本的核心功能实现代码：

<template>
  <div id="app">
    <div class="note-list">
      <note-item
        v-for="(note, index) in notes"
        :key="note.id"
        :note="note"
        @delete="deleteNote(index)"
        @edit="editNote(index)"
      />
    </div>
    <div class="add-note">
      <button @click="toggleAddMode">{{ addMode ? '取消' : '添加' }}</button>
    </div>
    <div v-if="addMode" class="add-form">
      <input type="text" v-model="newNote" @keyup.enter="addNote" />
    </div>
  </div>
</template>
 
<script>
import NoteItem from './components/NoteItem.vue';
 
export default {
  name: 'App',
  components: {
    NoteItem
  },
  data() {
    return {
      notes: [],
      newNote: '',
      addMode: false,
    };
  },
  methods: {
    toggleAddMode() {
      this.addMode = !this.addMode;
      if (this.addMode) {
        this.newNote = ''; // 清空输入框
      }
    },
    addNote() {
      if (this.newNote.trim()) {
        this.notes.push({
          id: Date.now(),
          content: this.newNote.trim()
        });
        this.newNote = '';
      }
    },
    deleteNote(index) {
      this.notes.splice(index, 1);
    },
    editNote(index) {
      // 编辑逻辑...
    }
  }
};
</script>
 
<style>
/* 样式略 */
</style>

这个简化版的代码实现了小黑记事本的基本功能，包括添加记事、删除记事和编辑记事。它使用了Vue组件化的方式，将记事本的每个条目和操作封装在NoteItem组件中，并通过父组件App来管理这些条目的状态。代码中使用了Vue的基本功能，如v-for指令来循环渲染条目，v-model来实现双向数据绑定，以及事件监听@click和@keyup.enter来处理用户的交互。