<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 2.0</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
<style>
.completed{
color:aquamarine;
text-decoration: line-through;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static top">Vue js 2.0</nav>
<div id="app" class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome Vue js 2.0</div>
<div class="panel-body">
<h1>My todos {todoCount}</h1>
<todo-items :todos="todos"></todo-items>
<todo-form :todos="todos"></todo-form>
</div>
</div>
</div>
</div>
</div>
<script type="text/x-temlpate" id="todo-items-template">
<ul class="list-group">
<li class="list-group-item"
v-bind:class="{'completed' : todo.completed}"
v-for="(todo,index) in todos">
{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="toggleCompletion(todo)"
>{todo.completed? 'Done' : 'Do'}
</button>
</li>
</ul>
</script>
<script type="text/x-template" id="todo-add-form-template">
<form v-on:submit.prevent="addTodo(newTodo)">
<div class="from-group">
<input type="text"
v-model="newTodo.title"
class="form-control"
placeholder="Add a new todo">
</div>
<br>
<div class="form-group">
<button class="btn btn-success" type="submit">Add Todos</button>
</div>
</form>
</script>
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script>
Vue.component('todo-items',{
template:'#todo-items-template',
props:['todos'],
methods:{
deleteTodo(index){
this.todos.splice(index,1)
},
toggleCompletion(todo){
todo.completed = !todo.completed
}
}
});
Vue.component('todo-form',{
template:'#todo-add-form-template',
props:['todos'],
data(){
return {
newTodo:{id:null,title:'',completed:false}
}
},
methods:{
addTodo(newTodo){
this.todos.push(newTodo),
this.newTodo = {id:null,title:'',completed:false}
},
}
});
new Vue({
el:'#app',
data:{
message:'Hello World',
todos:[
{id:1,title:'Learn Vuejs',completed:false}
],
},
computed:{
todoCount:function(){
return this.todos.length;
}
},
})
</script>
</body>
</html>
