Django 模板中的 Vue.js
Posted
技术标签:
【中文标题】Django 模板中的 Vue.js【英文标题】：Vue.js in Django Templates 【发布时间】：2018-06-15 22:55:26 【问题描述】：我正在尝试在 Django 模板中使用 Vue.js。一个这样的模板如下：
% load static %
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="myApp">
<span>Hello [[ message ]]</span>
<div id="map"></map>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://v1.vuejs.org/js/vue.js"></script>
<script src="% static 'js/script.js' %"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"></script>
</body>
</html>
我将 Vue 的插值分隔符更改为 [[ ]] 以避免与 Django 冲突。我的script.js 如下：
$(function()
var app = new Vue(
el: '#myApp',
delimiters: ['[[', ']]'],
data:
message: 'Hello, world!'
);
);
不幸的是，呈现的 HTML 包含[[ message ]]。有没有其他人遇到过类似的问题？
【问题讨论】：
你用的是什么版本的vue？ v1.vuejs.org/js/vue.js v1.0.28 令人惊讶的是，v-text="message" 指令有效
【参考方案1】：
正如 Vue v1.0 的 docs 所说：
// ES6 template string style
Vue.config.delimiters = ['$', '']
因此，在您的示例中更改为：
$(function()
Vue.config.delimiters = ['[[', ']]'];
var app = new Vue(
el: '#myApp',
data:
message: 'Hello, world!'
);
);
但强烈建议使用新版本的 Vue（版本 2）以保持最新！
【讨论】：
有效。但是，当我在控制台中尝试它时没有用，可能是因为 Vue 需要所有配置，因为它会进行插值。顺便问一下，第一次加载页面时如何加快插值速度？ 根据docs 再次 说：Vue.config 是一个包含 Vue 全局配置的对象。您可以在引导您的应用程序之前修改其下面列出的属性。至于您的其他问题，最好为此提出一个新问题！【参考方案2】：
Django 具有使用verbatim 跳过解释模板的内置功能
<div id="myApp">
% verbatim %
value_from_vue
% endverbatim %
value_from_django
</div>
<script>
var myApp = new Vue(
el: '#myApp',
data:
value_from_vue: "hello from vue"
)
</script>
django 模板引擎不会逐字解释任何内容。当其他（如果有）javascript 库不提供分隔符选项时，此功能也很有用。
但是，如果首选配置分隔符：
对于最新的 Vue（版本 2+），将配置放入 vue 实例中，就像在问题中一样。
$(function()
var app = new Vue(
el: '#myApp',
delimiters: ['[[', ']]'],
data:
message: 'Hello, world!'
);
);
对于 Vue 的第 1 版，就像 nik_m 的答案一样使用
Vue.config.delimiters = ['[[', ']]'];
【讨论】：
以上是关于Django 模板中的 Vue.js的主要内容，如果未能解决你的问题，请参考以下文章
道具被变异（在 django 模板和带有 CDN 的 Vue.js 中）
将 vue js 应用程序绑定到 django 模板不显示任何内容