[英]Why is my VueJs component not showing in the frontend?
我正在尝试在当前的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 dev工具,它向我显示了根节点,然后是greeter节点。 但是里面什么也没有。 而且应用程序容器也是空的。
如果模板来自django,则必须转义{{
和}}
。 要关闭模板解析,请使用{% verbatim %}
,也可以使用{% templatetag openvariable %}
(然后使用closevariable)。
尝试:
{% verbatim %}
<template>
<div>
<h1>Hello, {{ name }}</h1>
<input type="text" v-model="name">
</div>
</template>
{% endverbatim %}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.