Question

我正在使用基本的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>

Answer 1

在app.js的第三行上，"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: {}
    });
})

Vue组件未在基本php中呈现

1 个答案: