<html>
<head>
<title>project</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-">
<div class="container" id="app">
<div class="row">
<div class="clo-md-4 clo-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</h1>
<ul class="list-group">
<li class="list-group-item" v-for="(todo,index) in todos">{{todo.title}}
<button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
</li>
</ul>
<form v-on:submit.prevent="addTodo(newTodo)">
<div class="form-group">
<input type="text" v-model="newTodo.title" class="form-control" placeholder="Add a new todo">
</div>
<div class="from-group">
<button class="btn btn-success" type="submit">Add todo</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'hello world',
todos:[{id:1,title:'go to school'}],
newTodo:{id:null,title:''}
},
methods:{
addTodo(newTodo){
this.todos.push(newTodo)
this.newTodo={id:null,title:''}
},
deleteTodo(index){
this.todos.splice(index,1)
}
}
})
</script>
</html>