Django模板变量与Vue的插值语法冲突问题

Django模板变量与Vue的插值语法冲突问题

目录

• 问题
• 原因分析
• 解决方案
• • 1.更改Vue默认的插值语法的分隔符
  • 2.更改Django的模板变量分隔符
  • 3.禁止Django渲染

问题

Django + Vue 搭建前后端不分离项目时，Vue的插值语法失效，无法显示data中的数据。

原因分析

采用前后端不分离的方式，搭建Django+Vue的前后端系统时，Django渲染页面时，默认将{{  username  }}这类 *** 作当作自己的模板变量，并替换为相应的字符串。前端在拿到页面时，已经没有{{  username  }}这种结构。所以Vue实例对象中的data也就无法在容器中显示！！！

解决方案 1.更改Vue默认的插值语法的分隔符

Vue 1.x 修改全局配置，如下：

Vue2.x 修改插值语法的分隔符，如下：

Vue3.x 改插值语法的分隔符
可参考官网
compilerOptions.delimiters

2.更改Django的模板变量分隔符

使用模板标签来输出“{{”、“ }}”
django模板的templatetag关键字可以渲染 模板标签和模板变量的分隔符，标签参数如下：
参数         页面输出
openblock {%
closeblock %}
openvariable {{
closevariable }}
openbrace {
closebrace }
opencomment {#
closecomment #}

让Django渲染模板时，输出如下结果：

模板代码，使用templatetag

{% templatetag openvariable %} 
{% templatetag closevariable %}

3.禁止Django渲染

{% verbatim %}
	{{ username }}
{% endverbatim %}

 
上一篇：django返回富文本显示在页面
下一篇：Django与Vue的前后端交互