pranayaryal
4/15/2017 - 3:00 AM

Vue app.js file of components

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;
            }


        }

    }

});