-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (108 loc) · 3.15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue js 2.0</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
.completed {
color:#5cb85c;
text-decoration: line-through;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top "></nav>
<div class="container" id="app">
<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 Tutorial</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-template" 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 ? 'undo' : 'completed' }}
</button>
</li>
</ul>
</script>
<script type="text/x-template" id="todo-add-form-template">
<form v-on:submit.prevent="addTodo(newTodo)">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Add a new todo"
v-model = "newTodo.title"
>
</div>
<div class="from-group">
<button class="btn btn-success" type="submit">Add Todo</button>
</div>
</form>
</script>
<script src="js/vue.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) {
if(newTodo.title !== ''){
this.todos.push(newTodo)
this.newTodo = {id:null,title:'',completed:false}
}
}
}
})
new Vue({
el: '#app',
data:{
todos:[
{id:1,title:'Learn Vuejs',completed:false}
],
},
computed: {
todoCount() {
return this.todos.length;
}
},
})
</script>
</body>
</html>