DjangoでVue.jsを利用する

CDN版のVue.jsを利用する

DjangoとVueのデリミタ(区切り文字)が一緒なのでデフォルトの状態では使えないことに注意します。
Djangoの前提の状態は、このページの内容です。

// 共通のベースを修正して、CDN版のVue.jsでhello worldを表示します。
$ vim /srv/10/django/templates/common/base.html
<!DOCTYPE html>
<html>
<head lang="ja">
  <meta charset="UTF-8">
  <title>{% block title %}{% endblock %}</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div class="left">
    いいいい
  </div>
  <div class="main">
    {% block body %}
    {% endblock %}
  </div>
  <script>
    document.write("Hello world from javascript!!");
  </script>
  <div id="app">
    [[ message ]]
  </div>
  <script language="javascript" type="text/javascript">
    const app = new Vue({
      delimiters: ['[[', ']]'],
      el: '#app',
      data: {
        message: 'hello world from Vue.js CDN!!'
      }
    });
  </script>
</body>
</html>

解説

// CDN版のVue.jsを使うために記述します。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

// htmlにVue.jsでhello worldを表示させるための基本的な記述です。
// Vueインスタンスをマウントする場所を作る
  <div id="app">
    // Vueでバインド(定義)された値をhtmlに表示する
    {{ message }}
  </div>

// Vueインスタンスを作成しマウントする
  <script language="javascript" type="text/javascript">
    const app = new Vue({
      el: '#app',
      data: {
        // Vueインスタンスにdataプロパティを作成する
        message: 'hello world from Vue.js CDN!!'
      }
    });
  </script>

// Vue.js の記述の区切り文字を(デリミタ)を変更しています。これをやらないと、DjangoでVue.jsは表示しません。
delimiters: ['[[', ']]'],