Skip to content

Commit e4997c2

Browse files
author
Online Web Tutor
committed
Nested components in vue CLI & HTML to vue cli
1 parent 6222874 commit e4997c2

File tree

8 files changed

+199
-68
lines changed

8 files changed

+199
-68
lines changed

Diff for: ‎simple.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html>
2+
<head>
3+
<style>
4+
header{
5+
background: #3f51b5f2;
6+
color: white;
7+
padding: 3px;
8+
text-align: center;
9+
}
10+
footer{
11+
background: #3f51b5f2;
12+
padding: 7px;
13+
color: white;
14+
text-align: center;
15+
}
16+
17+
#content{
18+
text-align: center;
19+
}
20+
21+
#content ul{
22+
list-style: none;
23+
}
24+
25+
#content ul li{
26+
font-size: 19px;
27+
padding: 6px;
28+
color: #38190e;
29+
}
30+
31+
#content h3{
32+
text-align: center;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
38+
<header>
39+
<h2>Welcome to Online Web Tutor Youtube Channel</h2>
40+
<p>http://onlinewebtutorhub.blogspot.in/</p>
41+
</header>
42+
43+
<div id="content">
44+
<h3>Playlists</h3>
45+
<ul>
46+
<li><a href="https://github.com/owthub/wordpress-plugin" title="Wordpress Plugin Development" target="_blank">Wordpress Plugin Development</a></li>
47+
<li><a href="https://github.com/owthub/wordpress-theme" title="Wordpress Theme Development" target="_blank">Wordpress Theme Development</a></li>
48+
<li><a href="https://github.com/owthub/vuejs2" title="Vue Js2 Development" target="_blank">Vue Js2 Development</a></li>
49+
<li><a href="https://github.com/owthub/wordpress-json-rest-api" title="WP JSON Rest API Development" target="_blank">WP JSON Rest API Development</a></li>
50+
<li><a href="https://github.com/owthub/plugin-boilerplate" title="Plugin Boilerplate" target="_blank">Plugin Boilerplate</a></li>
51+
</ul>
52+
</div>
53+
54+
<footer>
55+
Copyright @Online Web Tutor Developers 2018
56+
</footer>
57+
</body>
58+
</html>

Diff for: ‎src/App.vue

+15-12
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,33 @@
11
<template>
22
<div>
3-
<h3>This is App vue page</h3>
4-
<student></student>
5-
<employee></employee>
3+
<owt-header></owt-header>
4+
5+
<owt-content></owt-content>
6+
7+
<owt-footer></owt-footer>
68
</div>
79
</template>
810

911
<script>
1012
11-
import Employee from './Employee.vue'
13+
import Header from './components/Header.vue'
14+
import Footer from './components/Footer.vue'
15+
import Content from './components/Content.vue'
1216
1317
export default {
14-
components:{
15-
employee: Employee
16-
},
18+
components:{
19+
"owt-header": Header,
20+
"owt-footer": Footer,
21+
"owt-content": Content
22+
},
1723
data () {
1824
return {
19-
msg: 'Welcome to Your Vue.js App'
25+
2026
}
2127
}
2228
}
2329
</script>
2430

2531
<style scoped>
26-
h3{
27-
color:yellow;
28-
font-size:45px
29-
}
32+
3033
</style>

Diff for: ‎src/Employee.vue

-26
This file was deleted.

Diff for: ‎src/Student.vue

-26
This file was deleted.

Diff for: ‎src/components/Content.vue

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div>
3+
<div id="content">
4+
<h3>Playlists</h3>
5+
<ul>
6+
<li v-for="playlist in playlists">
7+
<a v-bind:href="playlist.githublink" v-bind:title="playlist.title" target="_blank">
8+
{{ playlist.name }}
9+
</a>
10+
</li>
11+
</ul>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
19+
data () {
20+
return {
21+
playlists:[
22+
{
23+
name:"Wordpress Plugin Development",
24+
githublink:"https://github.com/owthub/wordpress-plugin",
25+
title:"Wordpress Plugin Development"
26+
},
27+
{
28+
name:"Wordpress Theme Development",
29+
githublink:"https://github.com/owthub/wordpress-theme",
30+
title:"Wordpress Theme Development"
31+
},
32+
{
33+
name:"Vue Js2 Development",
34+
githublink:"https://github.com/owthub/vuejs2",
35+
title:"Vue Js2 Development"
36+
},
37+
{
38+
name:"WP JSON Rest API Development",
39+
githublink:"https://github.com/owthub/wordpress-json-rest-api",
40+
title:"WP JSON Rest API Development"
41+
},
42+
{
43+
name:"WP JSON Rest API Development",
44+
githublink:"https://github.com/owthub/wordpress-json-rest-api",
45+
title:"WP JSON Rest API Development"
46+
}
47+
]
48+
}
49+
}
50+
}
51+
</script>
52+
53+
<style scoped>
54+
#content{
55+
text-align: center;
56+
}
57+
58+
#content ul{
59+
list-style: none;
60+
}
61+
62+
#content ul li{
63+
font-size: 19px;
64+
padding: 6px;
65+
color: #38190e;
66+
}
67+
68+
#content h3{
69+
text-align: center;
70+
}
71+
</style>

Diff for: ‎src/components/Footer.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div>
3+
<footer>
4+
{{ FooterContent }}
5+
</footer>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
12+
data () {
13+
return {
14+
FooterContent: "Copyright @Online Web Tutor Developers 2018"
15+
}
16+
}
17+
}
18+
</script>
19+
20+
<style scoped>
21+
footer{
22+
background: #3f51b5f2;
23+
padding: 7px;
24+
color: white;
25+
text-align: center;
26+
}
27+
</style>

Diff for: ‎src/components/Header.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div>
3+
<header>
4+
<h2>{{ headerMessage }}</h2>
5+
<p>{{ headerUrl }}</p>
6+
</header>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
data () {
13+
return {
14+
headerMessage: "Welcome to Online Web Tutor Youtube Channel",
15+
headerUrl: "http://onlinewebtutorhub.blogspot.in/"
16+
}
17+
}
18+
}
19+
</script>
20+
21+
<style scoped>
22+
header{
23+
background: #3f51b5f2;
24+
color: white;
25+
padding: 3px;
26+
text-align: center;
27+
}
28+
</style>

Diff for: ‎src/main.js

-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import Vue from 'vue'
22
import App from './App.vue'
33

4-
import Student from './Student.vue'
5-
6-
Vue.component("student",Student)
7-
84
new Vue({
95
el: '#app',
106
render: h => h(App)

0 commit comments

Comments
 (0)