Vue.js 代码在没有 cdn 的 html 上不起作用答案

【问题标题】：Vue.js code doesn't work on a html without cdnVue.js 代码在没有 cdn 的 html 上不起作用
【发布时间】：2017-07-24 07:21:23
【问题描述】：

我是 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 吗？

【问题讨论】：

当您可以制作这些 vue 组件并通过 vue 包含它们时，为什么还要使用 jQuery 和 .load()？
@Xander Luciano 我不知道。你指出的是那个 Vue.js 模板吗？
哦，伙计！你会喜欢这个的。您可以在 vue 中创建称为单个文件组件的“模板文件”：vuejs.org/v2/guide/single-file-components.html 并说您将其命名为 mysite-header 然后您可以将其用作组件，在您的主页上您只需执行 <mysite-header> 即可加载整个模板。
我将输入一个答案，其中包含有关如何执行此操作的一些详细信息。应该会让你的事情变得更容易。
谢谢。我总是使用车把模板并用 jquery 加载。 Vue.js 对我来说是新的。

标签： javascript vue.js vuejs2

【解决方案1】：

您应该尝试使用Single File Components 将页眉和页脚作为组件加载到 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>

当然还有很多，但真正解决这个问题的最佳方法是慢慢建立并尝试传递越来越多的数据，看看事物如何相互作用以及事物如何绑定在一起等。总的来说，我认为你会发现自己使用 vue 比使用 jQuery 更多。

【讨论】：