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 605c5a0

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

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