forked from danielstern/vue-todomvc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (65 loc) · 3.89 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
<head>
<title>
Vue Big Picture - TodoMVC
</title>
<!-- Bootstrap styles are used throughout this application. They are all included in this one CSS Link. -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!-- The app uses a very limited number of styles, found in its local CSS file here. -->
<link rel="stylesheet" href="style.css">
</head>
<body class="container col-lg-4">
<h1 class="mt-5">
Vue TodoMVC
</h1>
<!-- This div, with the ID "app", is where the application appears when it runs. -->
<div id="app"></div>
<!-- This unusual tag is a script text/template. It does not actually appear on the page as HTML. However, Vue can reference this HTML by ID and use it essentially as a template string. -->
<script type="text/x-template" id="app-template">
<section>
<!-- Here the v:on attribute is used, which is used to respond to any event. In this case, when the "click" event happens, it causes the value of showComplete to be changed. It is attached here to the label. -->
<h4>
<label v-on:click="showComplete = !showComplete">
<!-- The v-model attribute causes the checkdness of this box to always mirror the application's state -->
<input type="checkbox" v-model="showComplete">
Show Completed
</label>
</h4>
<!-- This list group contains a Vue repeater.-->
<ul class="list-group">
<!-- The v-for attribute that we see here repeats whatever tag it is on (in this case, a LI) one time for each element of the referenced list, which in this case is our list. Each repetition, the property has a different value. -->
<li v-for="todo in filteredTodos" class="list-group-item" v-on:click="todo.complete = !todo.complete;">
<label class="form-check-label ml-4">
<input
type="checkbox"
v-model="todo.complete"
class="form-check-input">
<!-- v-bind is used to change the value of HTML attributes, in this case the class attribute. -->
<span
v-bind:class="{completed:todo.complete}">
<!-- Here we see an example of Vue's {{ }} syntax, which is quite familiar to any Angular or Handlebars users.-->
{{ todo.name }}
</span>
</label>
</li>
</ul>
<!-- Here, a form is used to contain the submit button (which allows keyboard input to be captured.) Notice the v-on directive being used. The .prevent method works the same as submit, but also prevents the default behavior. -->
<form v-on:submit.prevent="addTodo" class="mt-3">
<input
type="text"
v-model="text"
class="form-control"
placeholder="Add new!">
<!-- Note the property :disabled. It begins with a colon (:), indicating that Vue should interpret the value as an expression, and not a string.-->
<button
:disabled="submitIsDisabled"
class="btn btn-primary mt-2">
Add Todo
</button>
</form>
</section>
</script>
<!-- Vue can be included as a script tag at the end of the application's HTML. There is no need for a build step at all, if you don't want one. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- Finally, the JavaScript file containing our application logic. -->
<script src="app.js"></script>
</body>