如何使用 vue.js 获取本地 html 文件？
[英]How to fetch local html file with vue.js?
问题描述
I am following this example
我正在关注这个例子
I am trying to load a html file with vue.js and add into my template.我正在尝试使用 vue.js 加载一个 html 文件并添加到我的模板中。
my attempt:我的尝试：
HTTML: HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/Static/content/css/foundation.css">
<link rel="stylesheet" type="text/css" href="/Static/content/css/spaceGame.css">
</head>
<body>
<div id="app">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Welcome to Foundation</h1>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 columns"></div>
<div class="large-8 columns">
<component :is="currentView"></component>
</div>
</div>
</div>
<!-- Footer -->
<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/Static/scripts/foundation.js"></script>
<script type="text/javascript" src="/Static/scripts/what-input.js"></script>
<script type="text/javascript" src="/Static/scripts/space.js"></script>
</body>
</html>
script:脚本：
$(function() {
$(document).foundation()
var myData = '../../Views/login.html';
Vue.component('manage-posts', {
template: myData,
})
Vue.component('create-post', {
template: '#create-template'
})
new Vue({
el: '#app',
data: {
currentView: 'manage-posts'
}
})
});
Errors:错误：
above I get the following:上面我得到以下信息：
- Component template requires a root element, rather than just text.
changing var myData = '../../Views/login.html';改变var myData = '../../Views/login.html';
to至
var myData = '<div>../../Views/login.html</div>';
gets rid of that error but...how do I load the actual html file?摆脱了那个错误，但是......我如何加载实际的 html 文件？
I am new to single page applications and to vue.js, been at this for some time now and can't figure it out.我是单页应用程序和 vue.js 的新手，现在已经有一段时间了，无法弄清楚。
EDIT:编辑：
The html file that I am trying to load:我试图加载的 html 文件：
<div>
<template id="manage-template">
<form>
<div class="sign-in-form">
<h4 class="text-center">Sign In</h4>
<label for="sign-in-form-username">Username</label>
<input type="text" class="sign-in-form-username" id="sign-in-form-username">
<label for="sign-in-form-password">Password</label>
<input type="text" class="sign-in-form-password" id="sign-in-form-password">
<button type="submit" class="sign-in-form-button">Sign In</button>
</div>
</form>
</template>
</div>
EDIT 2:编辑2：
If this has any impact on answers i just want to point out: using VS-code, site is running in IIS, no node.js is used here.如果这对答案有任何影响，我只想指出：使用 VS 代码，站点在 IIS 中运行，这里没有使用 node.js。
3 个解决方案
解决方案1
8 已采纳 2017-09-12 16:31:12
Vue provides a means of asynchronously creating a component. Vue 提供了一种 异步创建组件的方法。 You can use that in this case to retrieve your template from the server.在这种情况下，您可以使用它从服务器检索您的模板。
In this example code, I'm going to use axios to retrieve the template, but you can use whatever library you prefer.在这个示例代码中，我将使用 axios 来检索模板，但您可以使用您喜欢的任何库。
Vue.component('manage-posts', function(resolve, reject){
axios.get("../../Views/login.html").then(response => {
resolve({template: response.data})
})
})
解决方案2
6 2019-02-07 00:01:20
<div v-html="compiledHtml"></div>
data: function() {
return {
fileName: "terms.html",
input: ""
};
},
created() {
this.fileName = this.$route.params.fileName;
this.loadFile()
}
computed: {
compiledHtml: function() {
return this.input;
}
},
methods: {
loadFile() {
axios({
method: "get",
url: "../../static/" + this.fileName
})
.then(result => {
this.input = result.data;
})
.catch(error => {
console.error("error getting file");
});
}
},
This code works.此代码有效。 The trick is in the computed variable诀窍在于计算变量
解决方案3
-3 2017-09-12 15:40:48
When you point the template to '../../Views/login.html' the template is litterly a string with the value of ../../Views/login.html , so you need a way to get the file's data inside a javascript variable.当您将模板指向'../../Views/login.html'时，模板是一个字符串，其值为../../Views/login.html ，因此您需要一种获取文件的方法javascript 变量中的数据。
You can do this with RequireJS or fill the template using php (using ex. file_get_contents )您可以使用RequireJS或使用 php 填充模板（使用 ex. file_get_contents ）
A quick example of getting the data would be:获取数据的一个简单示例是：
var template_data = "<?php echo file_get_contents('../../Views/login.html'); ?>";
console.log(template_data);
test the example and check your browser's console, you could also load it in via Ajax.测试示例并检查浏览器的控制台，您也可以通过 Ajax 加载它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.