我正在使用基本的 php 并尝试在 html 中呈现 vue 组件。但它总是显示空白页。我没有收到任何 js 错误。
我是否遗漏了以下代码中的任何内容？
我的目录结构如下。
Directory Structure. I am sorry, unable to show image due to less rep points.
app.js 位于公用文件夹中。下面是代码
Vue.component("login", ("loginComponent.vue"));
var app = new Vue({
el: "app",
data: {
},
mounted: function() {
console.log("Mounted");
},
methods: {
}
});
loginComponent.vue 文件中的组件代码
<template>
<div>
<form role="form" class="row">
<label for="Email Address" class="control-label">UserName</label>
<input type="text" name="Email Address" class="form-control">
<label for="Password" class="control-label">Password</label>
<input type="password" name="Password" class="form-control">
<button type="button" class="btn btn-primary" >
Login
</button>
</form>
</div>
</template>
loginView.php文件代码如下。
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="./public/js/app.js"></script>
</head>
<body>
<div id="app">
<login></login>
</div>
</body>
</html>
最佳答案
在 app.js 的第 3 行，"app"不是有效的选择器，请尝试 "#app"相反。
编辑: 有 3 个问题需要解决。
你没有加载 loginComponent.vue
loginComponent.vue未加载到您的浏览器上。您需要在loginView.php中添加脚本标签.<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <script src="loginComponent.vue"></script> <script src="app.js"></script>没有 webpack 就无法使用 .vue 语法。你的
loginComponent.vue作为javascript运行，这意味着<template>标签不可用，您必须将模板设置为字符串。var loginComponent = { template: ` <div> <form role="form" class="row"> <label for="Email Address" class="control-label">UserName Or EmailAddress</label> <input type="text" name="Email Address" class="form-control"> <label for="Password" class="control-label">Password</label> <input type="password" name="Password" class="form-control"> <button type="button" class="btn btn-primary" > Login </button> </form> </div> `,您必须等待 DOMContentLoaded 才能安装应用程序。 在 app.js 中，
Vue.component("login", loginComponent); document.addEventListener('DOMContentLoaded', function () { var app = new Vue({ el: "#app", data: {}, mounted: function () { console.log("Mounted"); }, methods: {} }); })
关于php - Vue 组件不在基本 php 中呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51819928/