Vue要求每个组件都有一个单独的根节点。您的代码示例有两个，因为您在ul之外放置了[[rate]]。
我很难从单独的js文件初始化vue实例(我不想把代码放在每个模板html中(。
模板：
<html>
<head>
<title>Cinema project</title>
<meta name="viewport" content="width=device-width, initail-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% load static %}
</head>
<body>
<div class="container">
<ul class="list-group mt-2">
{% for x in huj%}
<li class="list-group-item">{{x}}</li>
{% endfor %}
</ul>
[[rate]]
</div>
<script src="{% static 'js/vue.js' %}" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
js_file:
new Vue({
delimiters: ['[[', ']]'],
el:".container",
data: {
rate: "test",
},
})
staticfiles_dir可以工作——我用一些随机的js代码测试了它。在上面的vue实例中，根本无法与我的模板挂钩。有什么办法解决它吗？
也许这样效果更好：
<div class="container">
<div>
<ul class="list-group mt-2">
{% for x in huj%}
<li class="list-group-item">{{x}}</li>
{% endfor %}
</ul>
[[rate]]
</div>
</div>