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 f2bdbae

Browse files
committed
starting components
1 parent b199d97 commit f2bdbae

File tree

10 files changed

+117
-1
lines changed

10 files changed

+117
-1
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎Basics/V-Directives/2.3.D/app.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
new Vue({
2+
el: '#app',
3+
data: {
4+
name: "",
5+
age: ""
6+
},
7+
methods: {
8+
logName: function() {
9+
console.log('you entered your name.');
10+
},
11+
logAge: function() {
12+
console.log('you entered your age');
13+
}
14+
}
15+
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Two Way Data Binding</title>
6+
<script src="https://unpkg.com/vue"></script>
7+
</head>
8+
<body>
9+
10+
<div id="app">
11+
<input type="text" v-model="name"> <!-- models the input to the name property of the data object, changing it dynamically -->
12+
<span> {{ name }} </span> <!-- outputs that -->
13+
<label>Age:</label>
14+
<input type="text" v-model="age"> <!-- same here -->
15+
<span> {{ age }} </span>
16+
</div>
17+
18+
<script src="./app.js"></script>
19+
</body>
20+
</html>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
This project: 2.3.D
2+
Refers to Chapter 2: Basics
3+
Section 3: V-Directives
4+
Example D: Two Way Data Binding
5+
6+
Description: Discover two way data binding with the v-model directive.

‎Basics/V-Directives/contents.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ Contents:
33
2.3.A - Declarative Rendering
44
2.3.B - Bind Directive
55
2.3.C - Conditionals and Loops
6+
2.3.D - Two Way Data Binding
67

‎Components/Intro/3.1.A/app.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
let one = new Vue({
2+
el: "#instance-one",
3+
data: {
4+
title: "Instance One"
5+
},
6+
methods: {
7+
changeTitle: function() { // we can change the title of another Vue instance
8+
two.title = "Title Changed from Instance One!" // reference the other Vue instance to be chnaged
9+
}
10+
},
11+
computed: { // another type of function
12+
greet: function() {
13+
return "Hello from Instance One!";
14+
}
15+
}
16+
});
17+
18+
let two = new Vue({
19+
el: "#instance-two",
20+
data: {
21+
title: "Instance Two"
22+
},
23+
computed: {
24+
greet: function() {
25+
return "I am instance two!";
26+
}
27+
}
28+
});
29+
30+
// we can also reference instances from outside of an instance
31+
setTimeout('2000');
32+
alert('about to change title of instance two from outside!');
33+
two.title = "Title Changed from the outside!"

‎Components/Intro/3.1.A/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Multiple Vue Instances</title>
5+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
6+
</head>
7+
<body>
8+
<h1>Multiple Vue Instances</h1>
9+
10+
<div id="instance-one">
11+
<h2>{{ title }} </h2>
12+
<p> {{ greet }} </p>
13+
<button v-on:click="changeTitle">Change Instance 2!</button>
14+
</div>
15+
16+
<!-- we can have the same property/function in different instances -->
17+
18+
<div id="instance-two">
19+
<h2> {{ title }} </h2>
20+
<p> {{ greet }} </p>
21+
</div>
22+
23+
<script src="app.js"></script>
24+
</body>
25+
26+
</html>

‎Components/Intro/3.1.A/info.txt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
This project: 3.1.A
2+
Refers to Chapter 3: Components
3+
Section 1: Intro
4+
Example A: Multiple Vue Instances
5+
6+
Description: Scale up to multiple Vue instances and see how they can communicate with each other

‎Components/Intro/contents.txt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Contents:
2+
3+
3.1.A - Multiple Vue Instances
4+
3.1.B - Intro to Components

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ A short, concise tutorial on the popular front-end framework Vue.js. Written for
99
+ [Syntax](#syntax)
1010
+ [Basic Directory Structure](#basic-directory-structure)
1111
+ [V-Directives](#v-directives)
12-
12+
3. [Components](#components)
13+
+ [Intro](#intro)
1314
5. [Resources](#resources)
1415

1516

@@ -98,7 +99,11 @@ app.message = "Vue is cool!"
9899
This should dynamically change the webpage.
99100

100101

102+
### Components
103+
In this section, we will learn about the basics of scaling up: components. In Vue.js, components are the way to easily reuse code. Components can split up pages or even make new HTML tags (will get into later).
101104

105+
#### Intro
106+
Components are just reusable Vue instances with a name. Since they are reusable Vue instances, they accept the same properties like `data`, `computed`, and `methods`. The only exceptions are with options like `el`.
102107

103108

104109

0 commit comments

Comments
(0)

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