vue.jsのメモ その２
データバインディングとは
データと描画を同期する仕組み
データバインディングの種類
テキストのバインディング
テキストのバインディングの場合には{{}}で描画に反映するけれども、タグ内の属性値をいじる場合には{{}}で操作しない。 その際はv-bindとかそういった類を使うことを現状推測している。
htmlタグの属性値をバインディング
v-bindはhtmlのタグ内の属性値を定める働きがある。例えばdivタグの属性classの内容に属性値としてcontainerをセットしたいとする。
つまり以下のようにしたい。
<div class="container"></div>
これはvueを使うと以下のように実装する事ができる.
<div v-bind:class="base"></div> new Vue({ data:{base:"container"} })
v-modelを使うのは双方向データバインディングをためっていう認識で正しいのか? --> 正しい。 双方向データバインディングを実現するためにv-modelディレクティブを使う。
双方向データバインディングには種類があると思われる。
v-modelディレクティブは2つの処理を一つにまとめているだけである。その処理は、
HTTPクライアント機能を実装する
vueではaxiosが推奨されている事はわかった。
axios を利用した API の使用 — Vue.js
クライアントを実装する方法をまとめる前に何の要素が必要になるか予め想像してみる。
axiosのソースをどうするか
どうやってaxiosをインストールするか。cdnがあるか？
クライアントを作成する際にどんな情報が必要になりそうか
httpクライアントであれば、
クライアントインスタンスを作成して、HTTPのメソッドを設定して、endpointを設定すればレスポンスが返ると想像する。 あとはHTTPリクエストのヘッダーのContent-Typeにtext/htmlかtext/jsonかを設定する場合も必要なのかもしれない。
クライアントインスタンスを生成するためのクラスは何なのかも調べる必要だと思う。
レスポンスの解析方法も分かったらメモに残しておく。
axiosのcdnがあったのでcdnを使ってみる方法を採用した。
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
cssを反映させる方法
cssを反映させるにはclassの値を設定する方法とstyleの値を設定する方法がある。 どちらも属性値の設定なのでv-bindを使ってやっていく。
<p v-bind:class="{bigSize: isBigSize}" ></p>
イベント疑問点
メソッドにeventとかeを引数にとることができるけどこれは何なのか？
イベントをconsole.logで中身を見てみると、イベントに関連した情報が格納されていることがわかる。 例えばイベントが起きたtagやラベルなどを取得する事ができる。
コンポーネント
コンポーネントとはページを構成するUI部品の役割を担うVueインスタンスらしい。
コンポーネントは再利用可能であること、そしてメンテナンス性を高める事ができることがメリットである。
コンポーネントの登録はグローバルで使用できるように登録する方法とローカルで使用できるようにする登録方法がある。
グローバルで登録するためには以下のようにVueクラスメソッドを使用する。 コンポーネントを利用するにはコンポーネント用のメソッドを使う必要がある。
Vue.component("コンポーネント名",{template:"<p>Hello</p>"})
定義したコンポーネントをどのようにhtmlで使うのか。
それはVue.componentとして定義したコンポーネント名をhtmlのタグ名として使用する事ができる。
<コンポーネント名></コンポーネント名>
またコンポーネントのローカル登録という概念がある。これはスコープを定めてそのスコープ内だけでしか使えないみたいなイメージだ。まあつまりローカル
var helloComponent = {template:"<p>Hello Vue.js</p>"} var Vue({ el = "#app", components :{ "myComp" : hello-Component } })
コンポーネント名の命名にも決まりがあるようでコンポーネントにはハイフンを加える必要がある。 またコンポーネントのdataプロパティは関数である必要もあるらしい。
VueRouterについて
VueRouterはシングルページアプリケーション（SPA）を作成するためのルーティングライブラリ。https://router.vuejs.org/ja/
シングルアプリケーションにおけるページ遷移の機能を担うライブラリ。
VueCLIでできること
- プロジェクトの雛形を作成
- 複数のjsファイルを一つにまとめる
- .vueファイルをjsに変換する
- トランスパイル
- javascriptの静的構文のチェック
- テストツールの導入
vue cli を使ってプロジェクトを開始する
Node.jsを使うことがvue cliを使う前提となっている。
Node..jsをインストールすることでnpmも付随してインストールできる。
これはNode Packgage Managerと呼ばれ、centosのyumに相当するものである。
vueのプロジェクト始め方（vue-cliを使って） - diadia
単一ファイルコンポーネントについて
単一ファイルコンポーネントは.vueを拡張子として作成する。 いろんなやり方があると思うけどそのベストプラクティスが知りたい。
単一ファイルコンポーネントはそのままではブラウザ表示する事ができない。したがってビルドする必要がある。 ビルドはwebpackとvue loaderで実施される。
単一ファイルコンポーネントの作り方
単一ファイルコンポーネントは.vueという拡張子を用いて作成する。中身はhtml, css, javascriptを書く。あと知りたいことは、単一ファイルコンポーネントであることをファイルに宣言する可能性があるのでそれをメモしたい。あとはどうやってビルドするのかも知っておきたい。
多分ビルドに関してはserveと同じ要領で
npn run build
でいけるんじゃないかっていう気はしている。 vueのプロジェクト内ではどのフォルダに単一ファイルコンポーネントを書くのかもはっきりさせたい。怪しいところはsrc/componentsに作成するのかなって思う。この予測は当たり。単一ファイルコンポーネントはsrc/components以下に作成する。
書き方の決まりがあった。 最初にtemplateタグを書く。その中でdivやpを記述するルールが有る。javascriptを書く場合にはscriptタグ内に記述すれば良い。特に新しいことはない。
<template> <div> <h1>Hello Vue.js</h1> </div>view </template> <script></script> <style scoped></style>
どうやって使うかって問題だけど作成した単一ファイルコンポーネントをhtmlにインポートして使うって感じである。
あとはhtmlに作成したテンプレートを記述する。これはファイル名を記述するだけでよい。
おそらくdjangoのurls.pyがrouterディレクトリの役割を果たし、viewsには表示するテンプレートを記述する感じだと思う。この中に単一ファイルコンポーネントを追加していく。その際にインポートと自作テンプレート名のタグを挿入する。って使い方だと思うけど、まだ理解できていない。
それにvue cliを使ってdjangoのプロジェクトを公開するのかも分かっていない。djangoのプロジェクトと抱き合わせた場合のvueの公開方法を調べる必要があるし、他にvue cli はSPAだけを作成するためのものなのかもはっきりしていない。他のソフトウェアとのつながりからどうなっているのか確認したい。
ビルドに関してはconfig.jsを変更したときに
npm run build
を実行するようだ。
webpackというものを使っているようだけれども、これは3種類のファイルが必要なようだ。
バンドルするファイル(統合対象のファイル)、エントリーポイントファイル、webpack設定ファイルである。
それぞれの役割を明らかにするのは重要か？とりあえずVue.jsは自動的に各ファイルを生成してくれるってことを聞いたけどその認識であっているのか？
そもそもwebアプリをSPAにするかMPAにするかでVueの使い方が大きく変わる。
ここの内容が大いに参考になった。
迷わないVueの学び方 - やわらかVue.js
axiosのpostメソッドはどうやって書くのか。
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
ドキュメントによるとaxios.post(URL, {key:value})でかけるようだ。javascriptの引数の書き方としてオプション的なものは連想配列で渡すっていう特徴があるのかなと感じた。leafletでもこんな書き方してるし。
django等でform内にボタンを２つ設けたい場合がある。ここでbuttonやinputを使うとボタンやインプットタグの属性値を分岐処理のキーとして分岐させることになる。単純にonclickイベントを使いたい場合にはアンカータグにv-on:clickを使うことができた。bootstrapを使えばアンカータグであるものの見かけはボタンとして見えるのでこれは都合が良い方法ではないか？と思うがなにか問題点はないのか。。。
MPAにおけるvueの実装方法について
djangoのようなMPAではvue cliを使うような方法でvueを利用するのではなく、cdnを通じてvueを利用する。
このような文章を読んだのでそんなものかと思ってcdnでvueを実装してきた。ここまでは何も問題がなかった。
問題はvuetifyを使おうと思ったときだ。どのように利用するのか全くわからなかった。 vue cliを使えばできるみたいだけれども、
vue cliを使わない方法がcdnであるはずでここで困った。
よく調べてみるとMPAでもvue cliを使う方法があるようだ。今回はこれを試して実際に動かすことができたか検証する。
djangoのテンプレートシステムを使う場合scriptタグを使ってvueを使うことになるのでvueの単一ファイルコンポーネントを使うことができない。restframeworkをバックにvueを使うとdjangoのテンプレートシステムのメリットを享受できない。
MPAではcdnを使うことを示す資料
flaskやrailsとどう組み合わせるのか - やわらかVue.js
MPAでもvue cliを使えるよって資料
Vue CLI 3でSPAではなくMPA(複数エントリーポイント)のプロジェクトを作成する - Qiita
重要なツール: django-webpack-loader
https://cli.vuejs.org/guide/html-and-static-assets.html#building-a-multi-page-app
vueのプロジェクトをスタートさせる。vue cliで。そして設定はデフォルトを選択してプロジェクトを作れば良い。
わからん時っていうのは何がわからんのか？ファイルとファイルの関係性が分かってないんじゃないか？各ファイルの役割もわかることが重要だけれども関係性も分かっていないとだめなのかも。
もしかしてwebpack.config.jsに基づいてwebpack-stats.jsonが作られる関係が存在する?? webpackの設定ファイル=webpack.config.js
webpack.config.jsに書く重要な要素としてentryとoutputがある。ここで設定したファイルパスは必要なら自分でディレクトリを作成する必要になる。
コンパイルを行うときは
./node_modules/.bin/webpack
assets/bundlesにバンドルされたファイルができる。
これはwebpack.config.jsのアウトプットに記述された部分。
コンパイルを行う方法は
./node_modules/.bin/webpack
そしてコンパイル後に生成されるファイルがどこに出力されるかは、webpack.config.jsに記述しておくもの。具体的にはoutputという項にパスを記述する。 outputには出力されるファイルパスの他に任意のファイル名をアウトプットファイルとして設定できる。
django-webpack-loaderの仕様 使う際にはloadする。以下のように。
{% load render_bundle from webpack_loader %}
{% verbatim %}
<div id="app">
{{ message }}
</div>
{% endverbatim %}
{% render_bundle 'main' %}
{% render_bundle 'main' %}はエントリのファイルが読み込まれるってこと？？
vue cli4とvue cli3で変更点があることが分かった。vue.config.jsには以前はbaseUrlが使えるようだが、cli4ではこれが使えないことが分かった。
module.exports = { baseUrl: "http://0.0.0.0:8080/",
module.exports = { publicPath: "http://0.0.0.0:8080/",
代わりにpublicPathを使うようだ。
vue init とvue createはprojectを作成するときに実行するものらしい。
npmでバージョンを指定してパッケージをイントールする方法
バージョンを指定してパッケージをインストールする場合、パッケージ名の後ろに「@バージョン」を追記する。
npm install webpack-bundle-tracker@0.4.3
npmでパッケージの特定のバージョンをインストールする - Qiita
vuexについて
データフローを管理する目的らしい。
データをstoreに保存し、必要に応じて更新取得を行っていく仕組み。
templateでstoreのデータを取得する場合
{{ $store.state }}
アクション | Vuex アクションは store.dispatch がトリガーとなって実行される。したがってstore.dispatchはユーザー側のロジックに近いところで書くことが想定される。 これはtemplateで書くときとscript内で書くときで違いがあるか？また、どのように呼び出すかサンプルもほしい。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
store.dispatch('increment')
vuexでコンポーネント間のデータやり取り
コンポーネントからstoreにデータを格納する肝は、 actionsを呼び出すこと。 だからstore/index.jsでactionsを定めること、stateで定めること、mutationsを定めることが必要になる。 actionsのプロパティを呼び出すにはstore.dispatch("actionsプロパティ")を実行する。 これはイベントが起きたときにv-onのmethodsの中身のロジックにstore.dispatch("actionsプロパティ")を実行すれば良いと思われる。
Vue3について
createApp関数はVue3から使えるものだと認識した。
じゃあcreateApp関数を探そうとVue3を探したが見つからない。最終的にはvue-nextというリポジトリがVue3であることがようやく分かった。ここまですごい時間かかった。
