8000 added 2.3.C · MissionVistaCS/Vue.js-Tutorial@605c5a0 · GitHub
[go: up one dir, main page]
Skip to content

Commit 605c5a0

Browse files
vwheezyvwheezy
committed
added 2.3.C
1 parent f2e02fd commit 605c5a0

File tree

4 files changed

+76
-2
lines changed

4 files changed

+76
-2
lines changed

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
<!-- determines whether the HTML is to be rendered -->
13+
<div id="app">
14+
<span v-if="seen">Now you see me</span> <!-- type app3.seen = false in the console -->
15+
</div>
16+
17+
<!-- using conditionals and chaining them -->
18+
<div id="app3">
19+
<span v-if="random < 5"> {{random}} Small</span>
20+
<span v-else-if="random === 5"> {{random}} Perfect </span>
21+
<span v-else> {{random}} Large </span>
22+
</div>
23+
24+
<!-- loops through like a for in loop -->
25+
<div id="app2">
26+
<ol>
27+
<li v-for="todo in todos">
28+
{{ todo.text }}
29+
</li>
30+
</ol>
31+
</div>
32+
33+
34+
<script>
35+
new Vue({
36+
el: "#app",
37+
data: {
38+
seen: true
39+
}
40+
});
41+
42+
new Vue({
43+
el: "#app3",
44+
data: {
45+
random: Math.floor(Math.random() * 10)
46+
}
47+
});
48+
49+
new Vue({
50+
el: '#app2',
51+
data: {
52+
todos: [
53+
{ text: "Vue" },
54+
{ text: "Is" },
55+
{ text: "Fun" }
56+
]
57+
}
58+
59+
});
60+
61+
</script>
62+
63+
</body>
64+
</html>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
This project: 2.3.C
2+
Refers to Chapter 2: Basics
3+
Section 3: V-Directives
4+
Example C: Conditionals and Loops
5+
6+
Description: Discover how data can be easily manipulated due to Vue's two way data binding. With this, conditionals and loops are easily implemented.
7+
8+
Reference: Conditionals Intro - https://vuejs.org/v2/guide/index.html#Conditionals-and-Loops
9+
Conditionals Intermediate - https://vuejs.org/v2/guide/conditional.html

‎Basics/V-Directives/contents.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ Contents:
22

33
2.3.A - Declarative Rendering
44
2.3.B - Bind Directive
5+
2.3.C - Conditionals and Loops
56

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Vue.js Tutorial
22

3-
A short, concise tutorial on the popular front-end framework Vue.js. Written for the Mission Vista High School Web Programming course.
3+
A short, concise tutorial on the popular front-end framework Vue.js. Written for the Mission Vista High School Web Programming course. ***Not every directory in the repo will be accounted for here... make sure to poke around in the repo for more information***
44

55
## Table of Contents
66
1. [Getting Started](#getting-started)
@@ -75,7 +75,7 @@ In this section, we will learn about the basics of Vue: basic directory structur
7575
#### Syntax
7676
#### Basic Directory Structure
7777
#### V-Directives
78-
Vue.js uses an attribute called v-directives, similar to [Angular's](https://angular.io/) ng-directives. They allow us to retrieve, bind, show, and other actions to our data.
78+
Vue.js uses an attribute called v-directives, similar to [Angular's](https://angular.io/) ng-directives. They allow us to retrieve, bind, show, and other actions to our data. With every new v-directive demonstrated, make sure to test out its data binding by trying it out in the console.
7979

8080
**Declarative Rendering:** [To Github Section]()
8181
Declarative Rendering basically means that Vue.js hooks up the data from our `<script>` tag to the DOM. To prove this, run the provided example and in the browser console type:

0 commit comments

Comments
 (0)
0