Skip to content

Commit fa5b237

Browse files
author
Shaun Pelling
committed
added lesson 27 code
1 parent 4a750e8 commit fa5b237

File tree

6 files changed

+88
-177
lines changed

6 files changed

+88
-177
lines changed

‎src/App.vue

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,38 @@
11
<template>
22
<div>
3-
<app-header v-bind:title="title" v-on:changeTitle="updateTitle($event)"></app-header>
4-
<app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
5-
<ul>
6-
<li v-for="ninja in ninjas">{{ ninja.name }}</li>
7-
</ul>
8-
<app-footer v-bind:title="title"></app-footer>
3+
<form-helper>
4+
<div slot="form-header">
5+
<h3>This is the title of a form</h3>
6+
<p>This is some info about the form</p>
7+
</div>
8+
<div slot="form-fields">
9+
<input type="text" placeholder="name" required />
10+
<input type="password" placeholder="password" required />
11+
</div>
12+
<div slot="form-controls">
13+
<button v-on:click="handleSubmit">Submit</button>
14+
</div>
15+
</form-helper>
916
</div>
1017
</template>
1118

1219
<script>
1320
// Imports
14-
import Header from './components/Header.vue';
15-
import Footer from './components/Footer.vue';
16-
import Ninjas from './components/Ninjas.vue';
21+
import formHelper from './components/formHelper.vue'
1722
1823
export default {
1924
components: {
20-
'app-header': Header,
21-
'app-footer': Footer,
22-
'app-ninjas': Ninjas
25+
'form-helper': formHelper
2326
},
2427
data () {
2528
return {
26-
ninjas: [
27-
{name: 'Ryu', speciality: 'Vue Components', show: false},
28-
{name: 'Crystal', speciality: 'HTML Wizardry', show: false},
29-
{name: 'Hitoshi', speciality: 'Click Events', show: false},
30-
{name: 'Tango', speciality: 'Conditionals', show: false},
31-
{name: 'Kami', speciality: 'Webpack', show: false},
32-
{name: 'Yoshi', speciality: 'Data Diggin', show: false}
33-
],
34-
title: 'Vue Wizards'
29+
3530
}
3631
},
3732
methods: {
38-
updateTitle: function(updatedTitle){
39-
this.title = updatedTitle;
40-
}
33+
handleSubmit: function(){
34+
alert('thanks for submitting');
35+
}
4136
}
4237
}
4338
</script>

‎src/components/Footer.vue

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/components/Header.vue

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/components/Ninjas.vue

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎src/components/formHelper.vue

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<div>
3+
<h1>Please fill out our form...</h1>
4+
<form>
5+
<div id="form-header">
6+
<slot name="form-header"></slot>
7+
</div>
8+
<div id="form-fields">
9+
<slot name="form-fields"></slot>
10+
</div>
11+
<div id="form-controls">
12+
<slot name="form-controls"></slot>
13+
</div>
14+
<div id="useful-links">
15+
<ul>
16+
<li><a href="#">link 1</a></li>
17+
<li><a href="#">link 2</a></li>
18+
<li><a href="#">link 3</a></li>
19+
<li><a href="#">link 4</a></li>
20+
</ul>
21+
</div>
22+
</form>
23+
</div>
24+
</template>
25+
26+
<script>
27+
// Imports
28+
29+
export default {
30+
components: {
31+
32+
},
33+
data () {
34+
return {
35+
36+
}
37+
},
38+
methods: {
39+
40+
}
41+
}
42+
</script>
43+
44+
<style scoped>
45+
h1{
46+
text-align: center;
47+
}
48+
form{
49+
width: 100%;
50+
max-width: 960px;
51+
margin: 0 auto;
52+
}
53+
#useful-links ul{
54+
padding: 0;
55+
}
56+
#useful-links li{
57+
display: inline-block;
58+
margin-right: 10px;
59+
}
60+
form > div{
61+
padding: 20px;
62+
background: #eee;
63+
margin: 20px 0;
64+
}
65+
#form-header{
66+
background: #ddd;
67+
border: 1px solid #bbb;
68+
}
69+
</style>

‎src/main.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import Vue from 'vue'
22
import App from './App.vue'
33

4-
export const bus = new Vue();
5-
64
new Vue({
75
el: '#app',
86
render: h => h(App)

0 commit comments

Comments
 (0)