Pyramid 项目的 .jinja 模板中的 Vue.js答案

【问题标题】：Vue.js in .jinja template for Pyramid projectPyramid 项目的 .jinja 模板中的 Vue.js
【发布时间】：2019-03-07 00:52:20
【问题描述】：

我想在 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{}

此代码在我的页面上没有返回任何内容。

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

【问题讨论】：

标签： python vue.js jinja2 pyramid

【解决方案1】：

了解发生了什么很重要——您的 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') }}
```

【讨论】：

【解决方案2】：

我正在寻找类似的东西。显然 jinja2 允许这样做：

{% raw %}

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

{% endraw %}

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

【讨论】：

这当然对我有用。