Python + Django でVue.jsを使ってみる #Python

Vue.jsをDjangoで使ったときのメモ

1.主な環境

カテゴリ	バージョンなど
os	windows 10 home 64bit
python	3.6.5
django	2.0.7

2.アプリケーション

vuetestとします。

(1)ファイル構成

vuetest
│  admin.py
│  apps.py
│  models.py
│  tests.py
│  urls.py
│  views.py
│  __init__.py
│  
├─migrations
・・・
│          
├─templates
│  └─vuetest
│          index.html

(2)urls.py

urls.py

from django.urls import path
from . import views

app_name = 'vuetest'
urlpatterns = [
    # 書籍
    path('', views.index, name='index'),   # 一覧
]

(3)views.py

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'vuetest/index.html',{'form_name': 'index'})

(4)index.html（失敗例）

index.html

{% extends 'commons/base.html' %}

{% load static %}

{% block links %}
  <script src="{% static 'js/vue.min.js' %}"></script>

{% endblock %}

{% block headertitle %}
Vue.js（これは失敗する例です。）
{% endblock %}

{% block content %}
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <br/>
  </div>
</body>

<script>

window.onload = function() {
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!',
      info: null
    },
  })
};
</script>
{% endblock %}

これで表示されるかな・・・と思ったら、ブラウザには何も表示されない。理由は簡単で、{{ message }}で、vueの変数を表示しようとしているが、この{{ }}は、Django Templateの予約記号でもある。

これを回避するために、Vue.jsのパラメータに「delimiter」を指定して、vue.jsの変数の予約記号を変更することで回避する。

変更後のhtmlは、以下のとおり。delimiterで指定した変数の開始記号、終了記号をhtml内に記述することで変数を表示することができる。

(4)index.html（変更後）

index.html

{% extends 'commons/base.html' %}

{% load static %}

{% block links %}
  <script src="{% static 'js/vue.min.js' %}"></script>
{% endblock %}

{% block headertitle %}
Vue.js
{% endblock %}

{% block content %}
</head>
<body>
  <div id="app">
    <p>[|[ message ]|]</p>
    <br/>
  </div>
</body>

<script>
window.onload = function() {
  new Vue({
    el: '#app',
    delimiters: ['[|[', ']|]'],
    data: {
      message: 'Hello Vue.js!',
    },
  })
};
</script>
{% endblock %}

変更後に表示される画面