用vue编写便签案例
时间: 2024-10-28 14:09:54 浏览: 6
在Vue中编写便签应用的一个简单案例可以分为以下几个步骤:
1. **创建Vue实例**:首先在HTML中创建一个基本的Vue应用结构,并引入Vue库。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Notes App</title>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
</head>
<body>
<div id="app">
<!-- 更多代码将放在这里 -->
</div>
<script src="main.js"></script>
</body>
</html>
```
2. **设置组件**:在`main.js`文件中,定义一个名为`NoteList`的Vue组件,它负责管理便签列表。
```javascript
import Vue from 'vue';
const NoteList = {
template: `
<div>
<h2>便签列表</h2>
<ul>
<li v-for="(note, index) in notes" :key="index">
<span>Title: {{ note.title }}</span>
<span>Content: {{ note.content }}</span>
<button @click="removeNote(index)">删除</button>
</li>
</ul>
<input type="text" v-model="newNoteTitle" placeholder="添加新便签">
<button @click="createNote">添加</button>
</div>
`,
data() {
return {
notes: [],
newNoteTitle: '',
};
},
methods: {
createNote() {
if (this.newNoteTitle.trim()) {
this.notes.push({
title: this.newNoteTitle,
content: '',
});
this.newNoteTitle = '';
}
},
removeNote(index) {
this.notes.splice(index, 1);
},
},
};
new Vue({
el: '#app',
components: {
NoteList,
},
});
```
以上代码中,`NoteList`组件初始化了一个空的便签数组,并提供了一个表单让用户添加新的便签和一个按钮来删除当前选中的便签。
3. **运行应用**:保存并刷新页面,你会看到一个基础的便签列表。
阅读全文