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

     阅读:24

问题

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