-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhello_world.html
145 lines (132 loc) · 3.58 KB
/
hello_world.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<h3>Vue app object (dynamic messaging)</h3>
<hr/>
<div id="app">
{{ message }}
{{ message_2 }}
</div>
<h3>Vue app-2 object(bind attributes of html tag)</h3>
<hr/>
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
<div>hi sachin</div>
</div>
<h3>Vue app-3 object(if-else-condition)</h3>
<hr/>
<div id="app-3">
<span v-if="seen">
{{ seen_message }}
</span>
<span v-else>
{{ unseen_message }}
</span>
</div>
<h3>Vue app-4 object (for loop)</h3>
<hr/>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<h3>Vue app-5 object (bind events)</h3>
<hr/>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<h3>Vue app-6 object (model binding)</h3>
<hr/>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<h3>Vue app-7 component</h3>
<hr/>
<div id="app-7">
<ol>
<!-- Now we provide each todo-item with the todo object -->
<!-- it's representing, so that its content can be dynamic -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World! i Guess it is h=working'
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: 'to visit page at: ' + new Date()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen_message: 'seen message',
seen: true,
unseen_message: 'unseen message'
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
var app5 = new Vue({
el: '#app-5',
data: {
message: 'hello sachin choudhary!'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('');
}
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello World'
}
})
//components
// Define a new component called todo-item
Vue.component('todo-item', {
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Coffee' },
{ text: 'Tea' },
{ text: 'Biscuits' }
]
}
})
</script>
</html>