vue.js開発過程記録vol.x:各コードの分析メモそのx:Djangoとの比較イメージメモ
経緯など
ちょっと既存のWebアプリ(Django/Python)に非同期処理をアプリにかけたいのでvue.jsを特訓することになったので、メモを残していきます。目標はWebAPIを叩けるようにするアプリです。
Djangoとの比較
今回はVue.jsとPythonフレームワークのDjangoとの比較をしてみました。
自分がDjangoを日常的に使うので、理解を深めるためです。Webアプリのフレームワークの側面がともにあるため類似部分も見つかったのでDjangoユーザーの方にはもしかしたら役立つ資料になるかもしれないです。
比較イメージなので、完全に1対1対応してないのであいまいです。ざっくりイメージをつかむためなので厳密ではないです。
番号 | Vue.js | Django | 備考 |
---|---|---|---|
1 | src/router/index.js | projルート(settings.pyがある場所)/urls.py + settings.pyのINSTALLED_APP部分 | URLまわりとアプリ適用設定 |
2 | src/components/ | app | |
3 | src/components/hoge.vueの<script> 部分 |
app/views.py | |
4 | src/components/hoge.vueの<template> 部分 |
template.html | |
5 | src/components/hoge.vueの<style> 分 |
template.html+staticファイルディレクトリからのインポート | |
6 | src/assets | staticファイルディレクトリ | |
7 | src/main.js | projルート(settings.pyがある場所)/settings.py(予想。検証中) | |
8 | src/App.vue | projルート(settings.pyがある場所)/settings.py(予想。検証中) | |
9 | (用語)データバインディング | render関数とテンプレートタグ | HTMLへの出力 |
引用・参考書籍
React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発
- 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎
- 出版社/メーカー: 技術評論社
- 発売日: 2018/05/09
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
この書籍のVue.jsの実装例を引用して仕組みを理解していきたいと思います。