为什么我的VueJs组件没有显示在前端

Why is my VueJs component not showing in the frontend?

本文关键字：显示 前端 我的 VueJs 组件 为什么      更新时间：2023-09-26

我正试图在当前的django项目中实现vuejs。这有点奏效。然而，我想要一个更干净的结构和使用vuejs组件。

然而，这些组件并没有出现在前端。

所以这里我有我的基本vue组件（来自vueify-laravel的例子）

<template>
    <div>
        <h1>Hello, {{ name }}</h1>
        <input type="text" v-model="name">
    </div>
</template>
<script>
    export default {
        data: function() {
            return {
                name: 'Laracasts'
            };
        }
    };
</script>
<style>
    h1 {
        color: red;
    }
</style>

在我的应用程序.js中，我有

var Vue = require('vue')
import Greeter from './components/Greeter.vue'
new Vue({
    el: '#app',
    components: {
        greeter: Greeter
    }
});

最后在我的一个django模板中

<div id="app">
    <greeter></greeter>
</div>

我安装了vue-dev工具，它向我显示了根节点，然后是迎宾节点。但里面什么都没有。应用程序容器也是空的。

如果模板来自django，则必须转义{{和}}。要关闭模板解析，请使用{% verbatim %}，也可以使用{% templatetag openvariable %}（然后使用closevariable）。

尝试：

{% verbatim %}
<template>
    <div>
        <h1>Hello, {{ name }}</h1>
        <input type="text" v-model="name">
    </div>
</template>
{% endverbatim %}
相关文章：