如何通过 Vue 而不是 Jinja 渲染 [英] How to render by Vue instead of Jinja
问题描述
<h1>我的任务</h1><tasks-app></tasks-app><ul class="list-group"><li class="list-group-item" v-for="列表中的任务">{{task.body|e}}上面是我的html.我想用 Vue 来渲染代码.
以上是我的 Vue 代码，Jinja 引发了一个异常，即 'task' 未定义，我希望的是 Vue 呈现的 html 代码而不是 Jinja，我知道这可以在 Laravel 中完成:
"@{{task.body}}"因为我是 Jinja 的新手，有人能帮帮我吗?
另一个选项是重新定义 Vue.js 使用的分隔符.如果您有很多现有的模板代码并且您希望开始将 Vue.js 功能添加到 Flask 或 Django 项目，这将非常方便.
var app = new Vue({el: '#app',数据: {消息:你好，Vue！"},分隔符:['[[',']]']})然后在您的 HTML 中，您可以混合使用 Jinja 和 Vue.js 模板标签:
{{normaltemplatetag}}[[ 信息 ]]不确定何时添加 "delimiters" 属性，但它是2.0版本.
<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>
This above is my html. I want to render the code by Vue instead.
<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>
The above is my Vue code, and Jinja raise an exception that 'task' is undefined, what I hope for is that the html code rendered by Vue instead of Jinja, I know it could be done in Laravel with this:
"@{{task.body}}"
Since I am new to Jinja, could anyone help me out?
The other option is to redefine the delimiters used by Vue.js. This is handy if you have a lot of existing template code and you wish to start adding Vue.js functionality to a Flask or Django project.
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
delimiters: ['[[',']]']
})
Then in your HTML you can mix your Jinja and Vue.js template tags:
<div id="app">
{{normaltemplatetag}}
[[ message ]]
</div>
Not sure when the "delimiters" property was added, but it is in version 2.0.
这篇关于如何通过 Vue 而不是 Jinja 渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
