<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.completed {
color: #1b6d85;
text-decoration: line-through;
}
</style>
</head>
<body >
<nav class="nav navbar-default navbar-static-top">
<div class="container">
<div class="row" id="app">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome Vue2.0</div>
<div class="panel-body">
<h1>My todos { todocount }</h1>
<todo-item :todos="todos"></todo-item>
<todo-form :todos="todos"></todo-form>
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
<script src="//cdn.bootcss.com/vue/2.0.0/vue.js"></script>
<script type="text/x-template" id="todo-template">
<ul class="list-group">
<li v-bind:class="{'completed':todo.completed}" v-for="(todo,index) in todos"
class="list-group-item">{ todo.title}
<button class="btn btn-warning btn-xs pull-right"
v-on:click="deletetodo(index)">Delete
</button>
<button class="btn btn-xs pull-right"
v-bind:class="[todo.completed?'btn-danger':'btn-success']"
v-on:click="completetodo(todo)">{ todo.completed?'undo':'completed' }
</button>
</li>
</ul>
</script>
<script type="text/x-template" id="todo-form-template">
<form v-on:submit.prevent="addtodo(newTodo)">
<div class="form-group">
<input v-model="newTodo.title" type="text" class="form-control" placeholder="add a new todo">
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Add Todo</button>
</div>
</form>
</script>
<script>
Vue.component('todo-item', {
template: '#todo-template',
props: ['todos'],
methods: {
deletetodo: function (index) {
this.todos.splice(index, 1);
},
completetodo: function (todo) {
todo.completed = !todo.completed;
}
}
})
Vue.component('todo-form', {
template: '#todo-form-template',
props: ['todos'],
data(){
return {
newTodo: {
id: null,
title: '',
completed: false
},
}
},
methods: {
addtodo: function (newtodo) {
newtodo.completed=false,
this.todos.push(newtodo);
this.newTodo = {id: null, title: ''};
},
}
})
new Vue({
el: "#app",
data: {
todos: [{
id: 1,
title: 'Vue2.0',
completed: false
}],
newTodo: {
id: null,
title: '',
completed: false
},
},
computed: {
todocount: function () {
return this.todos.length;
}
},
});
</script>
</html>
