如何使用 Vue 而不是 Jinja 进行渲染答案

【问题标题】：How to render by Vue instead of Jinja如何使用 Vue 而不是 Jinja 进行渲染
【发布时间】：2017-04-26 05:50:00
【问题描述】：

<template id="task-template">
    <h1>My Tasks</h1>
    <tasks-app></tasks-app>
    <ul class="list-group">
        <li class="list-group-item" v-for="task in list">
            {{task.body|e}}
        </li>
    </ul>
</template>

以上是我的html。我想用 Vue 来渲染代码。

<script>
    Vue.component('tasks-app', {
        template: '#tasks-template',
        data: function() {
            return {
                list: []
            }
        }
        created: function() {
            $.getJson('/api/tasks', function(data) {
                this.list = data;
            })
        }
    })
    new Vue({
        el: 'body',
    });
</script>

以上是我的 Vue 代码，Jinja 抛出了一个 'task' 未定义的异常，我希望 Vue 而不是 Jinja 呈现的 html 代码，我知道在 Laravel 中可以这样做：

"@{{task.body}}"

由于我是 Jinja 的新手，有谁能帮帮我吗？

【问题讨论】：

你的列表是否被正确填充，你能看到 HTML 中的数组并发布它吗？
如果您使用的是 Flask，您可以重新定义分隔符。 gist.github.com/lost-theory/3925738

标签： python html flask vue.js jinja2

【解决方案1】：

另一个选项是重新定义 Vue.js 使用的分隔符。如果您有很多现有的模板代码并且希望开始将 Vue.js 功能添加到 Flask 或 Django 项目，这将非常方便。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  delimiters: ['[[',']]']
})

然后在您的 HTML 中，您可以混合使用 Jinja 和 Vue.js 模板标签：

    <div id="app">
      {{normaltemplatetag}}
      [[ message ]] 
    </div>

不确定何时添加了 "delimiters" 属性，但它是在 2.0 版中。

【讨论】：

对于所有试图将 vue.js 实现为 django-rest 后端的前端的人来说，这条评论简直是天赐之物。它为我节省了很多挫折和神奇的错误渲染或未渲染的元素。
@mburke05 也可以重新定义 jinja2 使用的分隔符 - 这完全取决于您记录的内容。
这在某些情况下有效，但似乎不适用于 HTML 中的

【解决方案2】：

您需要将模板的某些部分定义为 raw，以便 Jinja 转义该部分，而不是尝试用自己的上下文填充它。

您需要这样做：

<template id="task-template">
  <h1>My Tasks</h1>
  <tasks-app></tasks-app>
  <ul class="list-group">
    <li class="list-group-item" v-for="task in list">
        {% raw %}{{task.body|e}}{% endraw %}
    </li>
  </ul>
</template>

参考：http://jinja.pocoo.org/docs/dev/templates/#escaping

【讨论】：

您也可以使用简写来表示 {% raw %}。这是作为 {{ '{{task.body|e}}' }}

【解决方案3】：

如果你使用的是 Flask，你可以重新定义 Jinja 使用的分隔符：

class CustomFlask(Flask):
    jinja_options = Flask.jinja_options.copy()
    jinja_options.update(dict(
        variable_start_string='%%',  # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
        variable_end_string='%%',
    ))


app = CustomFlask(__name__)  # This replaces your existing "app = Flask(__name__)"

【讨论】：

【解决方案4】：

您可以更改默认的 VueJS 或 Jinja 分隔符。我实际上更喜欢像下面这样更改 VueJS 分隔符：

new Vue({
  el: '#app',
  delimiters: ['${', '}']
})

那么您可以使用${variable} 而不是冲突的{{ var }}，请参阅docs。

这与 ES6 模板字符串样式匹配，所以我会说它是可取的。请记住，您在创建新组件时也必须这样做。

或者，您可以完全绕过 Jinja 模板渲染。只需将 index.html 从模板目录移动到静态目录（在 css、js 文件旁边），然后：

@app.route("/")
def start():
    return app.send_static_file("index.html")

如果你在 VueJS 中做所有的视图逻辑，这可以工作。

【讨论】：

【解决方案5】：

使用{{ '{{ vue }}' }}

我遇到了同样的问题，也解决了。

【讨论】：

【解决方案6】：

使用“分隔符”选项配置 Vue v2 类实例：

<div id='myapp'> !{ message } </div>
<script>
let myapp = new Vue({ delimiters: ['!{', '}'], ...});
</script>

来源：https://vuejs.org/v2/api/#delimiters

【讨论】：

【解决方案7】：

您可以在 html 代码中使用 {% raw %} {% endraw %}

【讨论】：

【解决方案8】：

我知道这是旧帖子，但是@Nathan Wailes 的回答对我有所帮助。我进一步尝试避免留胡子{{myVal}} 并使用v-text="myVar" 来呈现文本。而且我不需要覆盖 jinja 分隔符。请参阅下面的示例：

<!--Vuetify-->    
<v-btn class="ma-2" outlined color="indigo" v-text="connectToggleLabel"></v-btn>
<v-btn class="ma-2" outlined color="indigo"><span v-text="connectToggleLabel"/></v-btn>
<!-- basic -->
<input type="button" :value="connectToggleLabel"/>

希望这对某人有所帮助

【讨论】：

【解决方案9】：

您可以使用指令

<h3 v-text="message"></h3>

或者您可以使用分隔符

const app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
    message: 'a vue message'
    },
});

在您的 html 页面中

<h3>${ message }</h3>

【讨论】：