Vue.js code doesn't work on a html without cdn

Question

I'm new to Vue.js and i have a header html which doesn't have cdn link of Vue.js.

<nav class="navbar navbar-toggleable-md navbar-inverse">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="containerNav">
            <div class="row">
                <div class="col-6">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="navbar-brand" href="#"><img src="images/logo.png" height="30"/></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="login.html">TestPage</a>
                        </li>                       
                    </ul>
                </div>
                <div class="col-5" id="login-App">
                    <ul class="navbar-nav float-right">
                        <li class="nav-item">
                            <a class="nav-link" href="#">{{data.user}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" onclick="cleanLocalStorage()" href="login.html">Log out</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>

I load this header html with jquery document.ready function.

$(document).ready(function () {
    $(".footer").load("./footer.html");
    $(".header").load("./header.html");       
});

Thererefore i cant show Vue.js variable on the page. Here is my Vue.js code

var loginApp = new Vue({
    el: '#login-App',
    data: function () {
        return {
            data: {}
        }
    },
    methods: {
        fetchData: function () {
            Vue.set(loginApp.data, 'user', JSON.parse(localStorage.getItem('user')).name);
        }
    }
});

If i use cdn link on header html, it works, but i prefer to use only on index page. Is there any trick for this situation? Should i use Vue.js CLI instead of cdn?

Answer 1

You should try using Single File Components to load in the header and footer as components in vue.

Note: I'm using Babel and ES6 because it has some great features.

So here's your main javascript file, call it main.js or something

// Import Vue and Vue Components
import Vue from 'vue'
import mysite-header from './components/mysite-header.vue'
import mysite-footer from './components/mysite-footer.vue'

// Setup Vue
let app = new Vue({
    el:'#mysite-app',
    data: {
        pagename: "This can be a variable",
    },
    components: {
        mysite-header,
        mysite-footer,
    },
});

Now we build up the HTML for this page:

<html>
    <head>
        <!-- Normal HTML Stuff here -->
    </head>

    <body>
        <div id="mysite-app">
            <mysite-header>
            </mysite-header>

            <!-- Static html content, or another vue template-->

            <mysite-footer>
            </mysite-footer>
        </div>
    </body>
</html>

Now when vue is loaded, it'll automatically replace the custom html tags with your template files located at ./components/mysite-header.vue and ./components/mysite-footer.vue

Example of mysite-header.vue:

<template>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-block">
                        <h4 class="card-title">{{ titleText }}</h4>
                        <hr class="my-2">
                        <p class="card-text">
                            <slot></slot>
                        </p>
                        <p>Body Text: {{ bodyText }}</p>
                        <input v-model="titleText">
                        <button :title="titleText">Hover over me!</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        // There are properties we pass from the parent
        props: ['initTitleText','bodyText'],
        data() {
            // We can set local data equal to a property from the parent
            // To create a "default" value that isn't bound to the parent's value
            return {
                titleText: this.initTitleText
            }
        },
        mounted() {
            // Called when this vue is first loaded
            console.log('Component mounted.')
        }
    }
</script>

<style>
    .card {
        margin: .5rem 0;
    }
</style>

There's a lot more to it of course, but really the best way to figure this out is to just slowly build up and try passing more and more data and see how things interact and how things are bound together etc. Overall I think you'll find yourself using vue more than jQuery.

Vue.js code doesn't work on a html without cdn

Question

1 answers

solution1
1 ACCPTED 2017-07-24 07:47:42

Vue.js code doesn't work on a html without cdn

Question

1 answers

solution1 1 ACCPTED 2017-07-24 07:47:42

solution1
1 ACCPTED 2017-07-24 07:47:42