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