django模板与vue关于{{}}产生的冲突

最新推荐文章于 2026-06-17 23:01:55 发布

原创最新推荐文章于 2026-06-17 23:01:55 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web 同时被 2 个专栏收录

9 篇文章

订阅专栏

闲话平时

6 篇文章

订阅专栏

本文探讨了在Django后端环境下使用Vue自定义组件遇到的问题及解决方案，特别是在处理props时，由于Django对模板语法的解析导致的问题，以及如何通过{%verbatim%}

今天在学习vue的自定义组件，以及props部分的知识，后台是django搭建的，但是发现props总是不起作用，当从本地打开文件而不是从localhost打开时，发现，props功能正常，于是我发现，原来django连脚本里的{{}}都会替换，所以{% verbatim %}{% endverbatim %}对最好把脚本标签也给包括在里面.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue入门</title>
	<style type="text/css">
		.class1{
			background-color: #FFA;
		}
	</style>
</head>
<body>
	{% verbatim %}
	<div id="compo">
		<choose>self-define-component</choose>
		<chenshf>I am chenshf</chenshf>
		<neirong content='hello'></neirong>
	</div>

	
	<script type="text/javascript" src="/static/js/vue.js"></script>
	<script type="text/javascript">

		//全局组件
		Vue.component('choose',{
			template: '<h1>自定义组件</h1>'
		})

		var app = new Vue({
			el:'#compo',
			data:{
				'hello': 'data.message',

			},
			components:{
				'chenshf':{
					template:'<h2>我是陈烁帆</h2>'
				},
				'neirong':{
					props:['content'],
					template:'<span>content is:{{content}}</span>',

				}
			}
		})

	</script>
	{% endverbatim %}
</body>
</html>