VasyworksではDjangoテンプレートでVue.jsを呼び出して利用しています。Djangoのビューで渡されたモデルのデータをテンプレートで渡してVue.jsのスクリプトで参照するような流れです。
まずはコードサンプルを記載します。
■Djangoテンプレート側（sample.html）
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DjangoテンプレートとVue.jsのサンプル</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
・・・
<div id="contents">
・・・
</div>
・・・
<script type="text/javascript" src="{% static 'sample/js/sample.js' %}"></script>
<script type="text/javascript">
var app = createSampleVue(
{{ intValue1 }},
"{{ strValue1 }}",
{{ intValue2 }},
"{{ strValue2 }}",
);
</script>
</body>
</html>
■Javaスクリプト側（sample.js）
function createSampleVue(
valueA,
valueB,
valueC,
valueD,
) {
return new Vue({
el: "#contents",
delimiters: ["[[", "]]"],
data: {
dataA: valueA,
dataB: valueB,
dataC: valueC,
dataD: valueD,
},
mounted: function(event) {
・・・
},
methods: {
・・・
},
});
}
DjangoテンプレートとVue.jsを使う際に、Djangoテンプレートで変数を参照する際に使用する記号”{{” および “}}”と、Vue.jsで変数を参照する記号”{{” および “}}”がデフォルトでは同じであるため、まずはどちらかを変更しておく必要があります。
VasyworksではJavaスクリプト内でdelimitersオプションを指定して、Vue.js側の記号（デリミタ）を”[[” および “]]”に変更しています。
VasyworksではDjangoテンプレートで値をVue.jsに渡す方法として、Vueオブジェクト作成時の引数としてDjangoテンプレート側で記載しています。
文字列を引数として渡す場合は変数の両サイドを”（ダブルクォーテーション）で括っておくことを忘れないでください。
Javaスクリプト側ではVueオブジェクト作成時の引数を受け取り、dataプロパティに保存します。
DjangoテンプレートからVue.jsに値を渡す他の方法としては、Vasyworksでは使っていないのですが、<input type=”hidden” >タグにref指定を加えて、Vue.jsのJavaスクリプト側で$refsで参照するという方法などもありそうです。