Help us understand the problem. What is going on with this article?

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

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 %}

変更後に表示される画面

image.png

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away