小黑记事本vue源代码

小黑记事本是一个使用Vue框架编写的项目，实现了简易的记事本功能。下面是部分小黑记事本的Vue源代码：

模板部分：

<template>
  <div class="notebook">
    <h1>小黑记事本</h1>
    <div class="input-container">
      <textarea v-model="content" placeholder="开始编写"></textarea>
    </div>
    <div class="button-container">
      <button @click="saveNote">保存</button>
      <button @click="clearNote">清空</button>
    </div>
    <div class="notes-container">
      <h2>已保存的笔记</h2>
      <ul>
        <li v-for="(note, index) in notes" :key="index">{{ note }}</li>
      </ul>
    </div>
  </div>
</template>

脚本部分：

<script>
export default {
  data() {
    return {
      content: '',
      notes: [],
    };
  },
  methods: {
    saveNote() {
      if (this.content.trim() !== '') {
        this.notes.push(this.content.trim());
        this.content = '';
      }
    },
    clearNote() {
      this.content = '';
    },
  },
};
</script>

样式部分：

<style scoped>
.notebook {
  text-align: center;
  margin: 20px auto;
}

.input-container {
  margin-bottom: 20px;
}

textarea {
  width: 300px;
  height: 150px;
}

.button-container button {
  margin: 0 10px;
}

.notes-container {
  margin-top: 30px;
}

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

li {
  margin-top: 10px;
}
</style>

以上是小黑记事本的一个简化版本，实现了输入内容的保存和清空，并将已保存的笔记展示在界面上。用户可以在文本框中输入内容，点击保存按钮即可将内容添加到已保存的笔记列表中。点击清空按钮可以清空文本框中的内容。小黑记事本提供了简单的界面交互，方便用户保存和管理笔记。