为什么我的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 %}（然后关闭变量）。

尝试：

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