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{}

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

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

Answer 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') }}
```

Answer 2

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

{% raw %}

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

{% endraw %}

这似乎允许vue代码正常工作。

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

2 个答案: