DjangoのtemplateのVuejsの変数を表示する #Vue.js

問題点

現場ではDjangoのフレームワークのtemplateにVuejsを導入しました。

DjangoのtemplatesにCDN方法でVuejsを導入すれば、Vuejsから渡したデータは表示されないことになります。

原因

Djangoでは、変数を表示するために{{ 変数名 }}という書き方を使われます。
それと、"Mustache"構文を利用したVuejsの表示方法は同じなので、
Vuejsの方は表示されないです。

解決方法

Vuejsのdelimitersオプションを使用すれば、
Vuejsの表示方法を変更でき、データは表示されることになります。

index.html

...
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
...

...
<body>
<!--Vuejs-->
<div id="app">  
 <p>[[ message ]]</p>
</div>

<script>
 const app = new Vue({
    delimiters: ['[[',']]'],
    el: '#app',
    data: {
        message: 'hello Vuejs'
    }
 });
</script>
</body>

上記のVuejs表示方法を改修すれば、DjangoとVuejsお互いに影響がなく、変数を表示できます。