用vue写个便签案例

在Vue.js中创建一个简单的记事本（便签）案例，可以分为几个步骤。首先，我们需要安装Vue CLI并创建一个新的项目。然后，我们将构建一个组件来显示、添加和删除便签。

1. **初始化项目**:
使用命令行工具运行 `vue create my-notes-app` 创建一个新项目，并选择默认设置。

2. **引入核心库和组件**:
在 `src/components` 文件夹下创建一个名为 `Note.vue` 的文件，这是我们的便签组件模板：

<template>
  <div class="note">
    <input v-model="title" placeholder="请输入便签标题">
    <textarea v-model="content" placeholder="请输入便签内容"></textarea>
    <button @click="addNote">添加</button>
    <ul>
      <li v-for="(note, index) in notes" :key="index">
        {{ note.title }} - {{ note.content }}
        <button @click="removeNote(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: '',
      notes: []
    };
  },
  methods: {
    addNote() {
      this.notes.push({ title: this.title, content: this.content });
      this.title = '';
      this.content = '';
    },
    removeNote(index) {
      this.notes.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.note {
  /* 样式省略 */
}
</style>

3. **在App组件中使用**:
在 `src/App.vue` 中引入并使用这个组件：

<template>
  <div id="app">
    <Note />
  </div>
</template>

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

export default {
  components: {
    Note
  }
};
</script>

4. **运行应用**:
完成以上步骤后，在根目录执行 `npm run serve` 或者 `yarn serve` 运行应用，即可看到一个基本的便签列表。