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

问题

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

原因分析

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

解决方案

1.更改Vue默认的插值语法的分隔符

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

<script type="text/javascript">
	Vue.config.delimiters = ["[[", "]]"]
</script>

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

<script type="text/javascript">
	new Vue({

		delimiters: ["[[", "]]"],
		el: "#test",
		data: {
			username: 'jack',
			age: 23,
		},
		methods: {
			checkUser(event){
				console.log(event) //事件
				console.log(this) //Vue实例对象
			},
		}, 
	}
	)
</script>

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的前后端交互