はい、ということで書かせていただきやす。
今回はあくまでもvueの動き方とその性質を、今までvue.jsを見たことも触ったこともない人が
「あ、vueってなんかすごいのかもしれない。」
「あ、意外とvueって書きやすいのかもしれない。」
くらいに感じられるようになったらいいなくらいの内容です。
きちんとした教材レベルの解説が欲しい場合は参考書を買うか、「vue.js公式」、または「vue.js 入門」でググりませう。
何故なら、私がそもそも最近vueを触り始めたばかりだから。
なんなら技術者としてもまだまだ小童。日々精進。
ので、今回環境構築はカット。
今回はさらっと触ってみて面白そうなら調べて各々で環境構築をしてみませう。うん。
他にも色々ありますが、これを使うと速攻でvue.js体験できまする。
https://jsfiddle.net
Jsのとこの歯車マークからvue.js(バージョン最新)を選択。
ではいきませう。
まずはみんな大好き hello world
あ、挿絵は画像でござる。見て書きませう。
やっぱり書かなきゃ覚えないし、理解もできませぬ。(持論
まず最初にhtmlを以下のように記述。
そしてjs部分に以下を記述。
イケてない感じに仕上がりますが、今回はあくまでVue.jsメインなのでcssはあてません。
左上の【RUN】をクリックすれば hello world が表示されるはずです。
ざっくり説明すると、自身でhelloというインスタンス(おっきい箱的な感じ)を生成して、
その中にあるdataオブジェクト(小分けにした箱的な感じ)の中からgreetingという自作のデータを持ってきてそのまま当て込んで表示しているだけ。
ポケモンに置き換えるなら
ポケモンの中にいるピカチュウってモンスターの名前を表示してる感じでしょうか。(違う？
つまりjs部分を弄ってこのdataの中を書き換えて、pichuってのを追加
HTMLにもこう書く
すると
こんな風になる。これがオブジェクト指向。。。(多分)
個人的にjqueryもわかりやすかったんですが、vueもそれぞれのデータ関係を一個一個管理できる感じで一つずつの処理がすごく読みやすいし管理がしやすいと感じ申した。
で、今回はこのdata部分を基盤にいろいろと触っていくわけなのですが、そもそもこのVue.jsで生成したインスタンスの中身、new vue({ }) 直下にはオブジェクトとして入れられるものが色々あるのですが、今回の記事では以下の3つが入れられます。
『1つ目』
【el:】エレメントの略（多分）。
要はhtml側で指定した「Id」のこと。
このdom要素内のデータをvueでいろいろ触れる。
『2つ目』
【data:】データ。
html上で『{{ }}』内に記述するとそれを表示することができる。
多分他にもいろいろ使えるかもだけど今回はこの認識でよしとさせてください。
『3つ目』
【methods:】メソッズ。
この中で書いたメソッドを使ってdataをいろいろ触る。
いわゆる呪文部分。
では、呪文つながりでさっそく上記を使ってピカチュウにはメラを撃ってもらいませう。
まずhtmlを下記に書き換えて、
methodsを作成。
これでメラボタンをクリックすれば君の生成したピカチュウはクリックした回数分、紅蓮の炎を放ってくれることでしょう。
メラを撃てない場合はわざマシンを拾ってきて…いやまず自身のタイポ（タイプミス）を疑いませう。
さて、正直こんなメソッド簡単すぎて鼻ほじってる人が多いかもしれませんが、ざっくり解説するとステップは３段階です。
≪すてっぷ１≫
htmlに記載されている【v-on:click="mera"】で、ボタンクリック時にjs側の【mera】メソッドを呼び出している。
これはなんとなくわかるのではないでしょうか、最初はなんとなくでいいと思います。はい。
で、『v-on:click』 っていうのが vue特有の属性。
この『click』はほかのものに変えてもいけます。
試しに『click』を『keyup.enter』にしてみましょう。
多分一回ボタンをクリックして見ると、ピカチュウはメラを撃たないはずです。
しかし、エンターキーを押すとピカチュウは再び紅色の業火を放ってくれるでしょう。
≪すてっぷ２≫
【mera】メソッドの中で【data】に定義してある【attackCount】の数をインクリメントしている。
これは１００％わかるのではないでしょうか。一応説明すると
最初に【attackCount: 0】で初期値を設定しているのです。
んで、クリックするたびに【attackCount++】の、【++】によって数字が１ずつ増加する。これだけ。簡単ですね。
≪すてっぷ３≫
増加させた【attackCount】の数字を、html側の【{{ attackCount }}】に随時反映して映し出す。
この結果、ボタンを押すたびに数字がどんどん書き換わっていくっていう仕組みです。
さて、せっかくメラ撃てるんだしあてる相手がほしいところ。
ってことで、さらに改造。
htmlをこうして
jsも追記
これでメラを撃ちたい的の名前を打ち込むと、下のテキストにもその名前が反映されるはずです。
撃てない場合は(以下略)
さて、今回も超絶簡単なメソッドですが、ざっくり解説すると今回のステップは２段階です。
≪すてっぷ１≫
htmlに記載されている【v-modal="targetName"】で、【data】内の【targetName】に文字を反映（双方バインディングという）をさせている。
わけわからんとか思った人ももしかしたらいるかもしれないですが、要はテキストとして打ち込んだ文字がjs側の【data】に定義されている【targetName=’’】の、【’’】の中にはめ込まれているってニュアンスでいいのではないでしょうか。
≪すてっぷ２≫
ステップ１で取り込まれたテキストを、htmlに記載されている【
{{ targetName }}に{{ attackDamage }}のダメージ！
】内の【{{ targetName }}】に当て込んでいる。これを即時に、テキストを書き換えた瞬間に随時行っているわけですね。
※methods内のattackDamegeカウントの説明は省略。
今回のを使えばメラを任意のinputに変更してサンダガや石破天驚拳にしてみたり、技を使っている側をミッ○ーマウスに変えたりとかもできる。(ハハッ)
任意のdataを作成して、中身を配列を作成して、MP要素をつけてメラするたびにMPが減るとか、HP要素作ってみたりとかもできまする。
まぁ、あくまで今回のものを編集するのでいえば。っということにはなってしまうかもしれませぬが。
本来であれば、Todoアプリ（これすごい作りやすい）などのアプリや、APIを使って入力テキストに応じた検索結果を即時に持ってきたりなどなど、幅広く使えるのがVue.jsです。（らしい）
今回のはメソッドも使い方もほんとのほんとに最低限のレベル。
使い方を考えるともはや最低限以下かもしれない。恐らくそう。
でもきっとオブジェクト指向とかもよくわかってない人向けになってるはず・・・。
今までvue.jsを見たことも触ったこともない人が
「あ、vueってなんかすごいのかもしれない。」
「あ、意外とvueって書きやすいのかもしれない。」
くらいに感じられていると願いたい。。。
まぁいうて私もそんな理解できてるわけではないので、有識者からすれば「いや、そもそも完全に理解してから書けよ」って話なのかもしれないですが。
兎にも角にも、今回ので各言語におけるインスタンスやオブジェクトについてだったり、Vue.jsそのものについて興味持ってくれる人が増えればいいなあとおもうしだいでありんす。
調べれば優良記事や優良サイトは山ほどあるので是非この機会に色々触って見てもらえれば！
以上！