我想在我的 Pyramid 项目的 .jinja 模板中使用 vue.js,但我不能。 如果我理解正确,vue.js 只在 .html 文件上运行。我必须做什么?
signin.jinja2
<body>
<div id="id">
<p> {{ title }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../static/js/main.js"></script>
主要.js
new Vue({
el: '#id',
data: {
title: "hello world"
}})
登录.py
@view_config(route_name='signin', renderer='../templates/signin.jinja2')
def sign_in(request):
return{}
此代码在我的页面上不返回任何内容。
UPD:我认为我找到了决定 here ,但我不明白它是如何工作的。需要一些提示
最佳答案
重要的是要了解在哪里发生了什么——您的 Pyramid 应用程序基本上是一个程序,它获取一个文本 blob 作为其输入(请求)并返回另一个文本 blob 作为其输出(响应)。当浏览器接收到响应文本 blob 时,在这种情况下,将其解释为 HTML 页面及其所有脚本标记等。然后浏览器执行只能访问从该 HTML blob 生成的 DOM 的 javascript。您的 Pyramid 应用程序使用 Jinja2 模板生成该 blob 的事实在此时无关紧要。
现在您可以看到“jinja2 模板中的 vue.js”实际上从未发生过 - 它始终是“HTML 中的 vue.js”,您唯一需要做的就是确保您的应用程序输出正确的 HTML。
在这种特殊情况下这可能有点问题,因为 jinja2 和 vue.js 都使用 {{...}}
作为文本插值语法。如果您在浏览器中查看页面源代码,您会看到 {{ title }}
位已由 Jinja2 处理,而 vue.js 永远看不到它。您基本上是从具有类似语法的另一个模板生成一个模板。
我对 Jinja2 或 vue.js 都不太熟悉,但我会尝试以下操作:
考虑将模板库更改为语法不与 vue.js 冲突的内容。也许是 TAL 或 Mako。
如果您想继续使用 Jinja2,您需要某种函数来从 Jinja 模板输出 Vue.js 标记:
def vue_markup(s): return '{{ ' + s + ' }}'
你会像这样在你的模板中使用它:
{{ vue_markup('title') }}
关于python - Pyramid 项目的 .jinja 模板中的 Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52599124/