我正在尝试在当前的 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 开发工具,它向我显示了根节点,然后是欢迎节点。但里面什么也没有。应用程序容器也是空的。
最佳答案
如果模板来自 django,那么您必须转义 {{
和 }}
。要关闭模板解析,请使用 {% verbatim %}
或者您也可以使用 {% templatetag openvariable %}
(然后是 closevariable)。
尝试:
{% verbatim %}
<template>
<div>
<h1>Hello, {{ name }}</h1>
<input type="text" v-model="name">
</div>
</template>
{% endverbatim %}
关于javascript - 为什么我的 VueJs 组件没有显示在前端?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33984014/