Vue 和 Django 胡子模板冲突

Question

我计划做一个前端使用 Vue、后端使用 Django 的项目，但它们都使用双花括号{{ }}作为模板标签。有没有一种简单的方法可以更改两者之一以使用其他自定义模板标签？

提前致谢。

Answer 1

Vue 有一个名为delimiters 的参数，用于设置占位符的分隔符。例如，您可以通过这种方式将它们设置为双方括号：

new Vue({
    delimiters: ['[[', ']]'],
    el: "#myapp",
    //...
})


<div>
   {{ djangoPlaceholder }}
   [[ vuePlaceholderValue ]]
</div>

Answer 2

如果您不想更改 Vue 中的分隔符，您可以使用 verbatim Django 标签来防止大括号被解释：

{% verbatim %}
    {{ myvuevar }}
{% endverbatim %}

这是一种快速而简单的方法，可能就足够了。它的缺点是你不能在逐字标记中渲染 Django 变量（当然）。