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

Question

我正在尝试在当前的 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>

在我的 app.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 开发工具，它显示了根节点，然后显示了欢迎节点。但是里面什么都没有。并且应用程序容器也是空的。

Answer 1

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

尝试：

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