Question

<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提出了一个例外情况，即“任务”。是未定义的，我希望是由Vue而不是Jinja呈现的html代码，我知道它可以在Laravel中完成：

"@{{task.body}}"

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

Answer 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版本中。

Answer 2

您需要将模板的某些部分定义为原始，以便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

Answer 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__)"

Answer 4

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

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

Answer 5

使用＆＃39;分隔符＆＃39>配置Vue v2类实例。选项：

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

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

Answer 6

您可以更改默认的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中执行所有视图逻辑，则可以使用。

Answer 7

您可以在HTML代码中使用{％raw％} {％endraw％}

Answer 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"/>

希望这对某人有帮助

Answer 9

您可以使用指令

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

或者您可以使用分隔符

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

在您的 html 页面

<h3>${ message }</h3>

如何用Vue代替Jinja渲染

9 个答案: