Vue 入門
Node.js（npm+Browserifyなど）でパッケージ管理したり、サーバサイドで事前処理（.vueファイル、vue-cli）して配信ファイルを生成したりしてややこしいけれど、基本的にVue（Vue.js）はブラウザ上で動作するBootstrap++みたいなクライアントサイドフレームワークという理解。 参考 はじめに — Vue.js この「はじめに」をベースにサンプルを並べていく。 何もしないHTML <!DOCTYPE html> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> <h2>Hello Vue!</h2> <p> This is not Vue! CDNから開発用のVue.jsを持ってくるだけ。これをベースにいじっていく（SRIは略）。 テストするときはpython3 -m http.server --bind 127.0.0.1とか、php -S 127.0.0.1:8000とか、静的コンテンツを開ければなんでもよし。 テンプレート的用法 適当に使ってみる <!DOCTYPE html> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> <h2>Hello Vue!</h2> <p id="body"> {{ body_content }} <script> (function() { var app = new Vue({ el: '#body', data: { body_content: 'This is BODY!', }, }); })(); </script> Django/Jinjaのように{{ variable }}の形式で埋め込み位置を指定。Vueオブジェクトを作って初期値を与える。 ...