DjangoでVue.jsを利用する
Contents
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: ['[[', ']]'],