根据内容编写相应的vue代码

好的，根据您提供的文档内容，我将为您编写一个简单的 Vue 应用程序，实现记事本效果的功能。具体来说，这个应用程序将在文本框中输入待办事项，并将其显示在下方的列表中。

以下是 `App.vue` 和 `Content.vue` 组件的代码：

### App.vue

<template>
  <div id="app">
    <h1>待办事项</h1>
    <Content />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Content
  }
};
</script>

<style>
/* 添加一些基本样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

### Content.vue

<template>
  <div>
    <input v-model="newTodo" placeholder="添加新的待办事项" @keyup.enter="addTodo" />
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    }
  }
};
</script>

<style scoped>
input, button {
  margin: 10px;
  padding: 10px;
  font-size: 16px;
}

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

li {
  background: #f9f9f9;
  margin: 5px 0;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

### 解释
1. **App.vue**:
- 引入并使用了 `Content.vue` 组件。
- 设置了一些基本的样式。

2. **Content.vue**:
- 使用了一个输入框和一个按钮来添加新的待办事项。
- 输入框通过 `v-model` 双向绑定到 `newTodo` 数据属性。
- 按下回车键或点击按钮时调用 `addTodo` 方法，将新的待办事项添加到 `todos` 数组中。
- 使用 `v-for` 指令遍历 `todos` 数组并在列表中显示每个待办事项。

希望这段代码能满足您的需求！如果有任何进一步的问题，请随时告诉我。