我有一个简单的“ hello world” VueJS应用程序,我正在尝试开始工作:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
Message: {{ message }}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hello, world"
}
});
</script>
</body>
</html>
当我在浏览器中将该文件加载到本地磁盘(即file:///home/user/vue-project/index.html)上时,将加载并显示“ Hello,world”。
但是,如果我尝试获取相同的文件并通过python flask开发服务器或gunicorn提供该文件,则{{message}}会变为空白。
有谁知道可能导致这种情况发生的原因?
flask使用jinja2呈现其变量,{{ variable }}
该解析器用作其解析定界符
render("mytemplate.html",message="Hello")
会{{ message }}
在处理任何JavaScript之前用“ Hello”替换所有块...由于您未定义消息,它只是一个空字符串...您将需要配置vue以使用替代定界符(我使用[[ message ]]
)
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
Message: [[ message ]]
</div>
<script>
var vm = new Vue({
el: "#app",
delimiters : ['[[', ']]'],
data: {
message: "Hello, world"
}
});
</script>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句