Skip to content

Commit a2b0834

Browse files
willrsternwillrstern
committed
initial commit
0 parents  commit a2b0834

File tree

8 files changed

+220
-0
lines changed

8 files changed

+220
-0
lines changed

‎vue-1/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<h1>My App</h1>
11+
<div id="app"></div>
12+
13+
<script src="https://unpkg.com/vue"></script>
14+
<script src="./main.js"></script>
15+
</body>
16+
</html>

‎vue-1/main.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const app = new Vue({
2+
el: "#app",
3+
data: {
4+
bobby: {
5+
name: "Bobby Boone",
6+
age: 25
7+
},
8+
john: {
9+
name: "John Boby",
10+
age: 35,
11+
}
12+
},
13+
template: `
14+
<div>
15+
<h2>Name: {{john.name}}</h2>
16+
<h2>Age: {{john.age}}</h2>
17+
<h2>Name: {{bobby.name}}</h2>
18+
<h2>Age: {{bobby.age}}</h2>
19+
</div>
20+
`
21+
})

‎vue-2-filters-computed/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<h1>My App</h1>
11+
<div id="app"></div>
12+
13+
<script src="https://unpkg.com/vue"></script>
14+
<script src="./main.js"></script>
15+
</body>
16+
</html>

‎vue-2-filters-computed/main.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const app = new Vue({
2+
el: "#app",
3+
data: {
4+
bobby: {
5+
first: "Bobby",
6+
last: "Boone",
7+
age: 25
8+
},
9+
john: {
10+
first: "John",
11+
last: "Boone",
12+
age: 35,
13+
}
14+
},
15+
computed: {
16+
johnAgeInOneYear() {
17+
return this.john.age + 1;
18+
}
19+
},
20+
filters: {
21+
ageInOneYear(age) {
22+
return age + 1;
23+
},
24+
fullName(value) {
25+
return `${value.last}, ${value.first}`;
26+
}
27+
},
28+
template: `
29+
<div>
30+
<h2>Name: {{john | fullName}}</h2>
31+
<h2>Age: {{john.age | ageInOneYear}}</h2>
32+
<h2>Name: {{bobby | fullName}}</h2>
33+
<h2>Age: {{bobby.age | ageInOneYear}}</h2>
34+
</div>
35+
`
36+
})

‎vue-3-directives/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<h1>My App</h1>
11+
<div id="app"></div>
12+
13+
<script src="https://unpkg.com/vue"></script>
14+
<script src="./main.js"></script>
15+
</body>
16+
</html>

‎vue-3-directives/main.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const app = new Vue({
2+
el: "#app",
3+
data: {
4+
friends: [
5+
{
6+
first: "Bobby",
7+
last: "Boone",
8+
age: 25
9+
},
10+
{
11+
first: "John",
12+
last: "Boone",
13+
age: 35,
14+
}
15+
],
16+
},
17+
filters: {
18+
ageInOneYear(age) {
19+
return age + 1;
20+
},
21+
fullName(value) {
22+
return `${value.last}, ${value.first}`;
23+
}
24+
},
25+
methods: {
26+
decrementAge(friend) {
27+
friend.age = friend.age - 1;
28+
},
29+
incrementAge(friend) {
30+
friend.age = friend.age + 1;
31+
},
32+
},
33+
template: `
34+
<div>
35+
<h2 v-for="friend in friends">
36+
<h4>{{friend | fullName}}</h4>
37+
<h5>age: {{friend.age}}</h5>
38+
<button v-on:click="decrementAge(friend)">-</button>
39+
<button v-on:click="incrementAge(friend)">+</button>
40+
<input v-model="friend.first"/>
41+
<input v-model="friend.last"/>
42+
</h2>
43+
</div>
44+
`
45+
})

‎vue-4-components/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<h1>My App</h1>
11+
<div id="app"></div>
12+
13+
<script src="https://unpkg.com/vue"></script>
14+
<script src="./main.js"></script>
15+
</body>
16+
</html>

‎vue-4-components/main.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
Vue.component('friend-component', {
2+
props: ['friend'],
3+
filters: {
4+
ageInOneYear(age) {
5+
return age + 1;
6+
},
7+
fullName(value) {
8+
return `${value.last}, ${value.first}`;
9+
}
10+
},
11+
methods: {
12+
decrementAge(friend) {
13+
friend.age = friend.age - 1;
14+
},
15+
incrementAge(friend) {
16+
friend.age = friend.age + 1;
17+
},
18+
},
19+
template: `
20+
<div>
21+
<h4>{{friend | fullName}}</h4>
22+
<h5>age: {{friend.age}}</h5>
23+
<button v-on:click="decrementAge(friend)">-</button>
24+
<button v-on:click="incrementAge(friend)">+</button>
25+
<input v-model="friend.first"/>
26+
<input v-model="friend.last"/>
27+
</div>
28+
`
29+
});
30+
31+
32+
33+
const app = new Vue({
34+
el: "#app",
35+
data: {
36+
friends: [
37+
{
38+
first: "Bobby",
39+
last: "Boone",
40+
age: 25
41+
},
42+
{
43+
first: "John",
44+
last: "Boone",
45+
age: 35,
46+
}
47+
],
48+
},
49+
template: `
50+
<div>
51+
<friend-component v-for="item in friends" v-bind:friend="item" />
52+
</div>
53+
`
54+
})

0 commit comments

Comments
 (0)