Vue.js 在金字塔项目的 .jinja 模板中

Question

我想在我的 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>

main.js

new Vue({
el: '#id',
data: {
    title: "hello world"
}})

signin.py

@view_config(route_name='signin', renderer='../templates/signin.jinja2')
def sign_in(request):
return{}

此代码 return 我的页面上没有任何内容。

UPD：我认为我找到了决定 here，但我不明白它是如何工作的。需要一些提示

Answer 1

了解发生了什么很重要——你的 Pyramid 应用程序基本上是一个程序，它获取一个文本 blob 作为其输入（请求）并 returns 另一个文本 blob 作为其输出（响应）。当浏览器收到时，响应文本 blob 被解释为 HTML 页面及其所有脚本标记等。然后浏览器执行 javascript，它只能访问 DOM 是从 HTML blob 生成的。事实上，您的 Pyramid 应用程序使用 Jinja2 模板生成该 blob 在这一点上是无关紧要的。

现在您可以看到 "vue.js in jinja2 template" 从未真正发生过 - 它总是 "vue.js in HTML"，您唯一需要做的就是确保您的应用输出正确的 HTML。

在这种特殊情况下这可能有点问题，因为 jinja2 和 vue.js 都使用 {{...}} 作为文本插值语法。如果您在浏览器中查看页面源代码，您会看到 Jinja2 处理了 {{ title }} 位，而 vue.js 从未看到它。您基本上是从具有类似语法的另一个模板生成一个模板。

我对 Jinja2 或 vue.js 都不太熟悉，但我会尝试以下操作：

考虑将模板库更改为语法不与 vue.js 冲突的内容。也许是 TAL 或 Mako。
如果你想继续使用 Jinja2，你需要某种函数来从 Jinja 模板输出 Vue.js 标记：
```
def vue_markup(s):
    return '{{ ' + s + ' }}'
```
您可以像这样在模板中使用：
```
{{ vue_markup('title') }}
```

Answer 2

我正在寻找类似的东西。显然 jinja2 允许使用：

{% raw %}

Anything in this block is treated as raw text,
including {{ curly braces }} and
{% other block-like syntax %}

{% endraw %}

这似乎可以让 vue 代码正常工作。

Vue.js 在金字塔项目的 .jinja 模板中

Vue.js in .jinja template for Pyramid project

python

jinja2

pyramid

vue.js