bli*_*ile 3 python flask vuejs2
我正在尝试使用一个简单的“ 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>
| 归档时间： |
|
| 查看次数： |
775 次 |
| 最近记录： |