最近在學習Vue，看重了它的高效性和易用性。為了更好地掌握Vue的應用，我閱讀了各種Vue的demo源碼，讓我感到最有收獲的是一份簡潔明了的demo，現在我將與大家分享這一份源碼。
這個demo實現了一個簡單的Todo List應用，包含添加待辦事項、完成待辦事項、刪除待辦事項等基本功能。這里是核心代碼：
<html>
<head>
<title>Todo List</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input v-model="newTodo">
<button v-on:click="addTodo">添加</button>
<ul>
<li v-for="(todo, index) in todos">
<input type="checkbox" v-model="todo.done">
<span v-bind:class="{ done: todo.done }">{{ todo.text }}</span>
<i class="fas fa-trash-alt" v-on:click="removeTodo(index)"></i>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo: function() {
if (this.newTodo.trim() === '') return;
this.todos.push({
text: this.newTodo.trim(),
done: false
});
this.newTodo = '';
},
removeTodo: function(index) {
this.todos.splice(index, 1);
}
}
});
</script>
</body>
</html>可以看到，這份源碼使用了Vue的指令，如v-model、v-on等，方便地實現了與用戶的交互。同時，該代碼使用了Vue的data屬性，統一管理了所有的數據，修改起來也十分方便簡單。
總體來說，這份demo源碼非常簡潔明了，結構清晰，易于理解，是學習Vue的不錯的入門范例。