我是 Vue.js 新手，我有一个 header html，但没有 Vue.js 的 cdn 链接。
<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 函数加载此 header 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);
}
}
});
如果我在 header html 上使用 cdn 链接，它可以工作，但我更喜欢仅在索引页上使用。针对这种情况有什么技巧吗？我应该使用 Vue.js CLI 而不是 cdn 吗？
最佳答案
您应该尝试使用 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- 的模板文件页脚.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。
关于javascript - Vue.js 代码无法在没有 CDN 的 html 上运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45274442/