实现效果如下：
把玩了添加和删除功能，代码如下：
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section class="todoapp" id="app">
<header class="header">
<h1 v-on:click="f">{{ title }}</h1>
<form>
<input @keyup.enter="add" v-model="text" class="new-todo" placeholder="What needs to be done?" autofocus>
</form>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked>
<label>Taste JavaScript</label>
<button class="destroy" ></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
<li class="editing">
<div class="view">
<input class="toggle" type="checkbox">
<label>Buy a unicorn</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
</li>
<li v-for="todo in todos">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed">
<label>{{ todo.text }}</label>
<button class="destroy" v-on:click="destory(todo.text)"></button>
</div>
<input class="edit" value="Rule the web">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be ` items left` by default -->
<span class="todo-count"><strong></strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<!-- <script src="node_modules/todomvc-common/base.js"></script> -->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js:
(function (window) {
'use strict';
// Your starting point. Enjoy the ride!
var todos = [
{text: '吃饭', completed: true},
{text: '睡觉', completed: false},
{text: '相亲', completed: true},
]
new Vue({
el: '#app',
data: {
title: '思思时钟',
todos: todos,
text: ''
},
methods: {
f: function() {
window.alert('思思，你好');
},
// 添加
add: function() {
// 在vue应用程序中的方法内部可以通过this来访问当前应用程序的上的data中的成员
// window.alert(this.text);
// 由于改变了数据成员，使用v-for指定的地方就会重新渲染，修改模型，就会修改视图界面
// 修改了视图界面就会修改模型数据
if (this.text.trim().length === ) {
return;
}
this.todos.push({
text: this.text,
completed: false
});
this.text = '';
},
// 删除
destory: function(text) {
// console.log(text);
var that = this;
this.todos.find(function(todo, index) {
if (todo.text === text) {
that.todos.splice(index, );
}
});
}
}
});
})(window);
对Vue突然开始产生了很大的兴趣，思思打算把玩Vue了哟，哈哈