Vue app.js file of components
Vue.component('home-container', {
template: `
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
<h4>{{ information.heading}}</h4>
</div>
</div>
</div>
<div class="panel-body" id="example-component">
<h4>{{ information.body }}</h4>
</div>
</div>
</div>
</div>
`,
props: ['information']
});
Vue.component('script-tag', {
template: `
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
`
});
new Vue({
el: '#app',
data: {
selectedPage: {
heading: 'Welcome to my website',
body: 'I hope you will learn something new'
},
pages: {
Blog: {
heading: 'Comparing NumPy with TensorFlow',
body: 'I hope you will enjoy reading'
},
About: {
heading: 'Something about me',
body: 'I am a web developer. I also love Data Science'
},
Contact: {
heading: 'Keep in Touch',
body: '@pranayaryal'
}
}
},
methods: {
clickNav: function (clicked) {
if (clicked == 'Blog') {
this.selectedPage = this.pages.Blog;
} else if (clicked == 'About') {
this.selectedPage = this.pages.About;
} else if (clicked == 'Contact') {
this.selectedPage = this.pages.Contact;
}
}
}
});