-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
96 lines (93 loc) · 1.91 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
<html>
<head>
<script src="scripts/vue.js"></script>
</head>
<body>
<h1>Vue got style</h1>
<div id="app">
<h3>Two way binding</h3>
<label>i has something to say<label/><p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el:'#app',
data: {
message: 'i haz all your baze'
}
})
</script>
<div id="app2">
<h3>Loops and lists</h3>
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el:'#app2',
data: {
message:'test scope',
items: [
{text:'i was here'},
{text:'alex was pranked'},
{text:'my arms hurt'}
]
}
}
)
</script>
<div id="app3">
<h3>Methods</h3>
<p> {{ message }} </p>
<button v-on:click="reverseThis">Reverse Message</button>
</div>
<script>
new Vue({
el:'#app3',
data:{ message: 'reverse me' },
methods: { reverseThis: function() {
this.message = this.message.split('').reverse().join('')
} }
})
</script>
<br><br>
<div id="app4">
<h3>Dynamic list</h3>
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul><li v-for="todo in todos"><span>{{ todo.text }}</span><button v-on:click="removeTodo($index)">X
</button></li></ul>
</div>
<script>new Vue({el: '#app4',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}})</script>
<div id="app5">
<h3>Extended Vue object</h3>
<button v-on:click="sayHi">Press me</button>
</div>
<script>var extendedVue = Vue.extend({
methods: {
sayHi: function() { alert('hi')}
}
})
var vm = new extendedVue({ el:'#app5'});
</script>
</body>
</html>