カードゲーム
非常に簡易的なものですが、動くものを作って見ました。
出力されたコードはこのような感じでした。
| <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>uranai</title><link href=/static/css/app.b387307636adb7bd39933da5a36546ce.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.eed5c92157ba8f40ad16.js></script><script type=text/javascript src=/static/js/vendor.241ef15c58009ea20e89.js></script><script type=text/javascript src=/static/js/app.02ad93d1e68747d321f2.js></script></body></html> |
課題1
v-bind:src="card.path"
このようにsrcをbindしているのですが、assetsから画像を呼び出したいので、pathをstringで書き出すのではなく、カードの数字（1、2など）をcard.pathに設定し、前後の文字列は定数として持っておきたいのである。
[domain] + [card.path] + '/.png'
propsで渡ってきた変数しか使えないのかなー。調べる。
ディレクティブについて少し調べた事
v-ifは遅延描画
値がtrueになるまで描画はされない
v-showは状態に関わらず最初から描画される
cssで表示の切り替えをしている感覚
速度を求めるならv-showを使い、cssで扱いにくい要素に関してはv-ifを使う
v-ifを使う感覚が強いけど、それは無駄なdomを置いておきたくないからっていう事で、v-showの使い道は、トグル的なものに・・かな。私の想像の範疇でしかないけど。
ユーザー操作が激しいやつは、cssで制御しておきたい・・。
少しの遅延も許さないわよ！はv-showで書け・・とか？
vueを書いているときは癒しになります。普段はAngular使いなので・・
