使用 Vue + Django 模板语言时如何解决双花括号问题？答案

【问题标题】：How to solve double curly brackets issue when using Vue + Django template language?使用 Vue + Django 模板语言时如何解决双花括号问题？
【发布时间】：2017-09-03 15:10:20
【问题描述】：

我正在使用 Django template language 并希望在我的项目中使用 Vue。我遇到的一个主要问题是{{...}} 语法。我的 Vue 数据根本没有呈现。

<div id="app">{{ message }} // This is just empty on my page </div>

我只是在使用这个基本的 Vue 脚本：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

我该如何解决这个问题？

【问题讨论】：

verbatim 模板标签对您有用吗？例如：<div id="app">{% verbatim %}{{ message }}{% endverbatim %}...
那行得通！谢谢！

标签： python django vuejs2

【解决方案1】：

glenfant 说的很简单，但这更容易。

var app = new Vue({
    delimiters: ['{', '}'],
    el: '#app',
    data: { message: 'Hello Vue!' },
})

就是这样：你用它应该用来工作的标签来配置 Vue。 :) 我只使用一个大括号——{…}——但你也可以使用双方括号：[[ 和 ]]。

【讨论】：

【解决方案2】：

使用verbatim 模板标签。 https://docs.djangoproject.com/en/1.11/ref/templates/builtins/#verbatim

<div id="app">{% verbatim %}{{ message }}{% endverbatim %}</div>

【讨论】：

【解决方案3】：

在您的基本模板中，您可以添加以下行：

 <script>Vue.config.delimiters = ['${', '}'];</script>

然后你就可以在 Vue 中使用 %{...}，在 django 中使用 {{...}}。

【讨论】：