Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f2e02fd

Browse files
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/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)

AltStyle によって変換されたページ (->オリジナル) /