记事本用vue3和HTML写

在Vue3中结合HTML编写记事本应用，你可以创建一个简单的文本编辑组件，利用Vue的响应式特性管理文本内容。下面是一个简化的例子：

首先，安装Vue和必要的依赖，比如Element Plus库用于UI元素：

npm install vue@next @element-plus/core @element-plus/icons

然后创建一个名为`NoteEditor.vue`的文件，使用template、script和style部分：

<template>
  <div class="note-editor">
    <el-input v-model="content" type="textarea" placeholder="在这里输入笔记"></el-input>
    <button @click="save">保存</button>
    <button @click="discard">取消</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElInput } from 'element-plus';

const content = ref('');
function save() {
  console.log('保存内容', content.value);
}
function discard() {
  console.log('丢弃更改');
}

// 模拟本地存储功能（实际项目中替换为相应的API）
function saveToLocalStore(data) {
  localStorage.setItem('note', data);
}

function loadFromLocalStore() {
  const savedContent = localStorage.getItem('note');
  if (savedContent) {
    content.value = savedContent;
  }
}

onMounted(() => {
  loadFromLocalStore();
});
</script>

<style scoped>
.note-editor {
  padding: 1rem;
}
</style>

在这个例子中，我们创建了一个包含文本输入框、保存按钮和撤销按钮的记事本组件。用户输入的内容会通过`v-model`双向绑定到`content`数据属性上。点击保存按钮时，当前内容会被打印出来，并可以进一步发送到服务器或本地存储。