Vue.js 代碼在沒有 cdn 的 html 上不起作用

Question

我是 Vue.js 的新手，我有一個沒有 Vue.js 的 cdn 鏈接的標頭 html。

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

我使用 jquery document.ready 函數加載此標頭 html。

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

因此我無法在頁面上顯示 Vue.js 變量。 這是我的 Vue.js 代碼

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

如果我在標題 html 上使用 cdn 鏈接，它可以工作，但我更喜歡只在索引頁面上使用。 這種情況有什么訣竅嗎？ 我應該使用 Vue.js CLI 而不是 cdn 嗎？

Answer 1

您應該嘗試使用單文件組件將頁眉和頁腳加載為 vue 中的組件。

注意：我使用 Babel 和 ES6，因為它有一些很棒的特性。

所以這是你的主要 javascript 文件，叫它main.js什么的

// 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,
    },
});

現在我們為這個頁面構建 HTML：

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

現在，當 vue 加載時，它會自動將自定義 html 標簽替換為位於./components/mysite-header.vue和./components/mysite-footer.vue的模板文件

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>

當然還有很多，但真正解決這個問題的最好方法是慢慢建立並嘗試傳遞越來越多的數據，看看事物如何相互作用以及事物如何綁定在一起等。總的來說，我認為你會發現自己比 jQuery 更多地使用 vue。

Vue.js 代碼在沒有 cdn 的 html 上不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2017-07-24 07:47:42

Vue.js 代碼在沒有 cdn 的 html 上不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2017-07-24 07:47:42

解決方案1
1 已采納 2017-07-24 07:47:42