如何用Vue代替Jinj渲染

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提出了一个异常，即“task”是未定义的，我希望是Vue而不是Jinja呈现的html代码，我知道这可以在Laravel中完成：

"@{{task.body}}"

既然我是新来的，有人能帮我吗？

Answer 1

如果使用的是烧瓶，则可以重新定义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 2

另一个选项是重新定义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 3

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