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 0a3ebeb

Browse files
committed
components
1 parent f2bdbae commit 0a3ebeb

File tree

6 files changed

+53
-0
lines changed

6 files changed

+53
-0
lines changed

‎.DS_Store

-6 KB
Binary file not shown.

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
.DS_Store

‎Basics/.DS_Store

-6 KB
Binary file not shown.

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Vue.component('name', object);
2+
Vue.component('greeting', {
3+
template: '<p>Hey there, I am {{ name }}. <button v-on:click="changeName">Change Name</button> </p>',// template that is rendered when we use this component
4+
data: function() { // We can create data just like a stand-alone Vue instance... however, data must be a function because we have
5+
return { // to output data to multiple places now. Calling a function to return fresh data. *** It will not be updated in another place
6+
name: 'Yoshi'
7+
}
8+
},
9+
methods: {
10+
changeName: function() { // demonstrates different data for each component
11+
this.name = "Mario";
12+
}
13+
}
14+
});
15+
16+
new Vue({
17+
el: '#instance-one'
18+
});
19+
20+
new Vue({
21+
el: '#instance-two'
22+
});

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Components Introduction</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+
<h1> Vue Instance One </h1>
12+
<greeting></greeting> <!-- using the component we created -->
13+
</div>
14+
15+
<div id="instance-two">
16+
<h1> Vue Instance Two</h1>
17+
<greeting></greeting>
18+
</div>
19+
20+
<script src="app.js"></script>
21+
</body>
22+
23+
</html>

‎Components/Intro/3.1.B/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.B
2+
Refers to Chapter 3: Components
3+
Section 1: Intro
4+
Example B: Intro to Components
5+
6+
Description: Basics of components and how they work.

0 commit comments

Comments
(0)

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