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

Question

I'm new to Vue.js and i have a header html which doesn't have cdn link of Vue.js.我是 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>

I load this header html with jquery document.ready function.我使用 jquery document.ready 函数加载此标头 html。

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

Thererefore i cant show Vue.js variable on the page.因此我无法在页面上显示 Vue.js 变量。 Here is my Vue.js code这是我的 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);
        }
    }
});

If i use cdn link on header html, it works, but i prefer to use only on index page.如果我在标题 html 上使用 cdn 链接，它可以工作，但我更喜欢只在索引页面上使用。 Is there any trick for this situation?这种情况有什么诀窍吗？ Should i use Vue.js CLI instead of cdn?我应该使用 Vue.js CLI 而不是 cdn 吗？

Answer 1

You should try using Single File Components to load in the header and footer as components in vue.您应该尝试使用单文件组件将页眉和页脚加载为 vue 中的组件。

Note: I'm using Babel and ES6 because it has some great features.注意：我使用 Babel 和 ES6，因为它有一些很棒的特性。

So here's your main javascript file, call it main.js or something所以这是你的主要 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,
    },
});

Now we build up the HTML for this page:现在我们为这个页面构建 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>

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现在，当 vue 加载时，它会自动将自定义 html 标签替换为位于./components/mysite-header.vue和./components/mysite-footer.vue的模板文件

Example of mysite-header.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>

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