这是this文章中的代码片段，建议您阅读。

• 您必须将视图实例附加到某些元素，例如开始（例如）
• 设置分隔符，因为我们不需要与Django模板{{}}语法冲突
• 在id = 开始的div内，您可以放置​​vue自定义表单

<script type="text/javascript">
new Vue({
   el: "#starting",delimiters: ['${','}'],data: {
      articles: [],loading: false,newArticle: {...}
      ...
   }
 },mounted: function() {
},methods: {
 addArticle: function() {
  this.loading = true;
  this.$http.post("/api/article/",this.newArticle)
   .then((response) => {
     console.log(response);
  })
  .catch((err) => {
    this.loading = false;
    console.log(err);
  }) 
 },...
}
 });
</script>

  <div id="starting">
    <form v-on:submit.prevent="addArticle()">
            <div class="modal-body">
                <div class="form-group">
                <label for="article_heading">Article Heading</label>
                <input
                     type="text"
                     class="form-control"
                     id="article_heading"
                     placeholder="Enter Article Heading"
                     v-model="newArticle.article_heading"
                     required="required" >
            </div>
             <div class="form-group">
                      <label for="article_body">Article Body</label>
                      <textarea
                        class="form-control"
                        id="article_body"
                        placeholder="Enter Article Body"
                        v-model="newArticle.article_body"
                        required="required"
                        rows="3"></textarea>
                  </div>
             </div>
          <div class="modal-footer">
             <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
       </form>
  </div>

对于使用djagno widget tweaks

有了它，您可以拥有类似的东西：

views.py

def myview(request):
    form = MyForm()
    return render(request,'mytemplate.html',{'form': form})

mytemplate.html

{% load widget_tweaks %}
<form v-on:submit-prevent="myaction()">
    {% render_field form.field v-model="myattr" %}
</form>

它将完美运行