8000 added v-bind · MissionVistaCS/Vue.js-Tutorial@f2e02fd · GitHub
[go: up one dir, main page]
Skip to content

Commit f2e02fd

Browse files
vwheezyvwheezy
committed
added v-bind
1 parent ab8714c commit f2e02fd

File tree

6 files changed

+88
-3
lines changed

6 files changed

+88
-3
lines changed

‎Basics/V-Directives/2.1.A/index.html renamed to ‎Basics/V-Directives/2.3.A/index.html

File renamed without changes.

‎Basics/V-Directives/2.1.A/info.txt renamed to ‎Basics/V-Directives/2.3.A/info.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
This project: 2.1.A
1+
This project: 2.3.A
22
Refers to Chapter 2: Basics
3-
Section 1: V-Directives
3+
Section 3: V-Directives
44
Example A: Declarative Rendering
55

66
Description: Prerequisite for V-Directives and seeing how Vue binds the data to the DOM, making it reactive.

‎Basics/V-Directives/2.3.B/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Installing Vue.js with a CDN</title>
5+
6+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7+
8+
</head>
9+
10+
<body>
11+
12+
<!-- dynamically bind different messages to the title when you hover over text -->
13+
<div id="app">
14+
<span v-bind:title="message">
15+
Hover your mouse over me for a few seconds
16+
to see my dynamically bound title!
17+
</span>
18+
</div>
19+
20+
21+
<!-- dynamically bind different paths to an image -->
22+
<div id="app2">
23+
<img src='imageSrc'></img>
24+
</div>
25+
26+
<!-- dynamically bind different ids to a div -->
27+
<div id='app3'>
28+
<div v-bind:id="dynamicId"></div>
29+
</div>
30+
31+
32+
<!-- dynamically bind different booleans in the case of a button -->
33+
<div id='app4'>
34+
<div v-bind:disabled="isButtonDisabled">Button</div>
35+
</div>
36+
37+
38+
<!-- this is where the Vue.js logic will be held -->
39+
<script>
40+
// demonstrates usage of multiple Vue instances
41+
42+
new Vue({
43+
el: "#app",
44+
data: {
45+
message: 'You loaded this page on ' + new Date().toLocaleString()
46+
}
47+
});
48+
49+
new Vue({
50+
el: '#app2',
51+
data: {
52+
imageSrc: 'https://www.example.com'
53+
}
54+
});
55+
56+
new Vue({
57+
el: '#app3',
58+
data: {
59+
id: 'someId'
60+
}
61+
});
62+
63+
new Vue({
64+
el: '#app4',
65+
data: {
66+
67+
isButtonDisabled: false // can be null or undefined
68+
}
69+
});
70+
71+
</script>
72+
73+
</body>
74+
</html>

‎Basics/V-Directives/2.3.B/info.txt

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
This project: 2.3.B
2+
Refers to Chapter 2: Basics
3+
Section 3: V-Directives
4+
Example B: Bind
5+
6+
Description: discover the usage for the bind directive: binding one or more attributes
7+
8+
References: Bind Directive Documentation - https://vuejs.org/v2/api/#v-bind

‎Basics/V-Directives/contents.txt

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
Contents:
22

3-
2.1.A - Declarative Rendering
3+
2.3.A - Declarative Rendering
4+
2.3.B - Bind Directive
5+

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,5 @@ This should dynamically change the webpage.
105105
### Resources
106106
Vue.js is one of the better documented frameworks out there. Regardless, I have compiled a list of my favorite Vue.js documentations/tutorials while writing this tutorial.
107107
+ **[Vue.js Official Documentation](https://vuejs.org/)**
108+
+ [6 Best Vue.js Tutorials](https://medium.com/quick-code/top-tutorials-to-learn-vue-js-for-beginners-6c693e41091d)
108109

0 commit comments

Comments
 (0)
0