我有一个django应用程序，我使用的是vue.js，但是vue.js只有在vue位于HTML文件中时才有效。一旦我把它移到一个单独的JS文件中，它就不再工作了。我想知道我是否遗漏了一些非常明显的东西HTML文件
{% extends 'blog/base.html' %}
{% block content %}
{% load static %}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11" type="text/javascript"></script>
<script src="{% static 'blog/JS/main.js'%}" type="text/javascript"></script>
<div class="con">
<button type="button" name="button" @click='addForm()'>
new
</button>
<div class="car-body" v-for="(post, index) in posts">
<span style="float:right;background-color:green"
@click='removeForm(index)'>
x
</span>
<h4>Add Article (index:{{ index }})</h4>
<div >
<input type="text" name="" placeholder="Title"
v-models='post.title'>
<input type="text" name="" placeholder="Preview"
v-models='post.preview'>
</div>
</div>
</div>
{% endblock content %}
JS文件
var app= new Vue({
el: '.con',
data:{
posts: [
{
title:'',
preview:''
}
]
},
methods:{
addForm(){
this.posts.push({
title: '',
preview:''
})
},
removeForm(){
this.posts.splice(index, 1)
}
}
})
脚本应位于body的末尾。
<html>
<head>
<meta charset="utf-8" />
<title>HBL</title>
</head>
<body>
<div id="application">
<greeting></greeting>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="esterno.js"></script>
</body>