Django 模板中的 Vue.js

Question

我正在嘗試在 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 ]] 。 有沒有其他人遇到過類似的問題？

Answer 1

正如 Vue v1.0 的每個文檔所說：

// ES6 template string style
Vue.config.delimiters = ['${', '}']

因此，在您的示例中更改為：

$(function() {
    Vue.config.delimiters = ['[[', ']]'];
    var app = new Vue({
        el: '#myApp',
        data: {
            message: 'Hello, world!'
        }
    });
});

但是，強烈建議使用新版本的 Vue（版本 2）以保持最新狀態！

Answer 2

Django 具有內置功能，可以使用逐字逐字跳過解釋模板

<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 (version 2+) ，就像問題中一樣，將配置放在 vue 實例中。

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

對於Vue 版本 1，就像 nik_m 的答案一樣使用

Vue.config.delimiters = ['[[', ']]'];

Django 模板中的 Vue.js

問題描述

2 個解決方案

解決方案1
10 已采納 2018-01-06 08:20:02

解決方案2
4 2019-12-22 13:43:54

Django 模板中的 Vue.js

問題描述

2 個解決方案

解決方案1 10 已采納 2018-01-06 08:20:02

解決方案2 4 2019-12-22 13:43:54

解決方案1
10 已采納 2018-01-06 08:20:02

解決方案2
4 2019-12-22 13:43:54