vue3+ts项目 笔记总结

在Vue 3和TypeScript结合的项目中，可以通过以下步骤来创建一个简单的记事本功能：

1. 创建一个新的Vue组件，例如Notes.vue。
2. 使用<script setup lang="ts">来启用组合式API。
3. 定义一个响应式的数组来存储记事本条目。
4. 创建添加记事本条目的方法。
5. 使用v-for指令来渲染记事本条目列表。
6. 使用按钮来删除单个记事本条目。

以下是一个简单的例子：

<template>
  <div>
    <div>
      <input v-model="newNote" @keyup.enter="addNote" type="text" placeholder="Add note" />
      <button @click="addNote">Add</button>
    </div>
    <div>
      <ul>
        <li v-for="(note, index) in notes" :key="note">
          {{ note }}
          <button @click="removeNote(index)">Delete</button>
        </li>
      </ul>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
 
const notes = ref<string[]>([]);
const newNote = ref<string>('');
 
const addNote = () => {
  if (newNote.value.trim()) {
    notes.value.push(newNote.value.trim());
    newNote.value = '';
  }
};
 
const removeNote = (index: number) => {
  notes.value.splice(index, 1);
};
</script>

这个组件允许用户添加新的记事本条目，每条记事本都有一个删除按钮来移除它。记事本条目存储在响应式数组notes中，并且使用v-for进行渲染。