Vueを初めて学習したので使い方とサンプルをまとめて紹介します

Vueができないと今の時代はフロントエンドの仕事ないっぽい…

ある会社からスカウトきて、フロントエンドできると言ったものの、Vueできますか、の質問に答えられず。

またエージェントとの面談でもVueできますか、と尋ねられ、どうも2021年末時点でVueができないとフロントエンドは話にならないっぽいです。

そこで勉強をはじめました、2021年12月15日。

できるようになると何ができなかったのか分からなくなるので忘備録として記録していきます

2022/1/7追記：
一度使えるようになるとVueでの実装はかなり便利に感じます。ただすんなりいかず困ったことも多いので、別にまとめています。

Vueの実装時につまずいたこと、気づいたことをまとめて紹介します

うまく動かんやん...こうした悩みと解決方法を示します。Vueが初めての人はこちらの記事の方が良いかも。ラジオボタンを２回押さないと反映されないラジオボタンのイベント発生にはv-on:clickではなく、v-on:changeを用いる。cl...

tatepro.com

Vueとは何か、使うメリットは？

VueはJavaScriptのフレームワークです。

IDに紐づけた物体（コンポーネント）を作り（マウントし）、そのコンポーネントを操作するイメージです。

フレームワークというものを私ははじめて触ったのですが、ある言語の原形に対して付加機能がつけられるとかそんな感じっぽいです。

たとえばVueを使えば、ページの表示を動的にできます。リアクティブとも表現するようです。

今まではページの再読み込みによって表示を変えてきましたが、Vueを使えば再読み込みせず直ちにページ上で要素が変更できます。

え？CSSで要素の非表示とかすれば再読み込みしなくてもできたじゃん？

と思いました？ええ、私もです。

ただこれだと処理が複雑、そしてソースコードが煩雑になって読込にサーバーに負荷がかかることになります。

Vueで動的に変更できればこれらの欠点が解消できて可読性もあがるというものです。

今までは複数の単一要素を持てなかったのが、Vueでは単一の複数要素が持てるようになったイメージです。たぶん。

導入方法

HTMLファイルにCDNでvue.jsを読み込むのが早くてよいです。

CDNとは

CDNはcontents delivery networkの略称で、簡単に言うとネットワーク上のどこかに置かれてるコンテンツを参照して自身のファイルで使えるようにできる便利な仕組みです。

vueだと、下記のスクリプトを入れてやるだけです。

<script src="https://unpkg.com/vue@next"></script>

このほかにCLI（command line interfave）といって、コマンドプロンプトで扱えるようにもできるんですけど、localhostでページが表示されたものの、その後どうしてよいか分かりません…。

node入れて、npm入れて…指示に従ってやっただけで理解が追い付かず。vueを学ぶことが一番なのでCLIは飛ばします。

Vueの構成

Vueはスクリプトでコンポーネントを作成し、対象にマウントすることで動作します。

よく分からないと思うので、codepenに書かれた下記のソースコードを見てみましょう。

{{〇〇}}　Vue要素に文字列を挿入する/演算結果を表示する

まず、文字列を挿入する方法を紹介します。このソースコードはVueの公式を参照しています。

See the Pen Hello Vue by Vue (@Vue) on CodePen.

CSSは無視してもらってよいです。大事なのはHTMLとJS部です。

まずHTMLでhello-vueというidを定義して、その中に{{ message }}がありますね。
この {{ }}で囲んだmessageがvueの要素で、動的に変更できます。{{ }}で囲むのはvueの記述ルールです。
{{}}で囲った内部で演算ができます。たとえば{{num * 10}}とか。コードはv-bindのほうを見てください。

つづいてJSを見てみましょう。
はじめにHelloVueAppというコンポーネントを定義しています。
コンポーネントとは何かしらの処理がまとまった塊です。似た言葉にインスタンスやオブジェクトがありますが、これらとの違いはよく分かりません。
定義内ではまずdata(){~}の関数を書きます。正確には data function(){~}なんですけど、functionは書かなくてもよいそう。
それで、data関数の中にreturnで変数に値を入れます。data関数はいわゆる初期化ですかね。
作成したコンポーネントはVue.create(HelloApp)で完成します。
そしてそれをHTML部のhello-vueのIDと紐づける形でマウント（DOMを作成）してやればhello-vueの要素を後述する操作で動的に変更できるようになります。

・v-bind　HTML要素の属性を変更する・スクリプトのreturnで複数の変数を扱う

HTML要素の属性を変更するにはv-bindを用います。
たとえば、下記参照ください。

See the Pen vuetest_v-bind by Hidenori Himeno (@hidenori-himeno) on CodePen.

img要素のsrc属性をvueで設定します。このとき使うのがv-bindです。
v-bind:srcのように、属性の前にv-bind:を付加します。v-bindを省略して:srcとすることもできます。
src属性にはpictureという変数を入れて、この変数をスクリプト側で設定します。

また、コンポーネントのdata関数のreturn内で複数の変数（といっていいのか！？）を扱うときは、カンマで区切る必要があります。
上の例でいえば、
message:”,
picture:”
のように、カンマがつけてやることでvueはそれぞれを認識できます。

・v-if/v-else-if/v-else　処理の切り替え

要素内にif文を入れて処理の切り替えができます。

See the Pen Untitled by Hidenori Himeno (@hidenori-himeno) on CodePen.

条件は文字列と数値のどちらでもかまいません。

文字列の場合、
v-if=”〇〇===××”のように記述し、コンポーネント内で〇〇:××のように設定します。
××部が可変となっていて、v-else-ifで複数持たせて選択します。
サンプルだと、typeという変数でA,B,Cとして分けてます。まあ単純にif文の扱い方と同じです。

数値の場合、
基本的には文字列と同じように扱い、v-if=”〇〇＜××”のように不等号での設定ができます。

・v-show　要素の表示切替

要素の表示/非表示を切り替えることもできます。

See the Pen vuetest_v-show by Hidenori Himeno (@hidenori-himeno) on CodePen.

要素にv-show=”〇〇”で宣言して、コンポーネント内で〇〇をtrueにすれば表示、falseにすれば非表示となります。
これはCSSのdisplay:none;と全く同じです。ソースコードもdisplay:none;が付加されていることが確認できます。

・v-for　配列のレンダリング

時間あるときに説明します。とりあえずコード見て触ってみてください。

See the Pen vuetest_v-for by Hidenori Himeno (@hidenori-himeno) on CodePen.

・v-on　イベント発生

v-onはクリックやマウスオーバーなど様々なイベント発生に用います。
例として、クリックイベントとマウスオーバー/マウスリーブを示します。

See the Pen vuetest_v-on:click by Hidenori Himeno (@hidenori-himeno) on CodePen.

まず要素にv-on:click=〇〇で関数を宣言します。
つづいてコンポーネントにてmethods:{}でメソッドを宣言し、この中にさきほどHTMLで書いた〇〇関数の中身を記述します。

methodとは

methodsはコンポーネントに属する関数です。
キャッシュ機能を持ちませんので、ページをリロードすると変数は初期化されます。
後述するcomputedとほとんど機能は同じですが、computedにはキャッシュ機能があり値が変わらない限り変数の値を保持します

この例でいえば、「数字を1増やす」ボタン要素にv-on:click=”increment”を宣言して、メソッド内で変数をインクリメントしています。
ちなみに、「v-on:」を「@」と略記してもよいです。この動作確認として「数字を2増やす」ボタンのHTMLは@clickで表現しました。

また、イベント発生で遷移するのは関数なので、引数を用いた処理にも対応しています。
HTMLで@click=”alert_ex(~~)”と宣言した部分を見てみてください。

あと要素にマウスが乗ったとき、離れた時のイベントも書いてみました。
マウスオーバーしたら他の要素を非表示にして、マウスリーブしたら非表示要素を再び表示させます。

ほかにどんなイベントがあるんでしょう。誰か教えてください。
それにしてもvueってほんとよくできてますね。

・v-model　入力フォームの内容を受け取る（フォーム入力バインディング）

公式の説明が詳細に書かれてるので、まずは公式を見ると良いでしょう。

テキストボックスやチェックボックスなど入力フォームの中身を双方向にやりとりできるのがv-modelです。

See the Pen vuetest_v-model by Hidenori Himeno (@hidenori-himeno) on CodePen.

v-modelで変数を設定して、スクリプトで内容を受け取り、返します。

メソッドを使って変数の値を操作することもできます。例ではフォームに入力されている値を読み取って、インクリメントして返します。

v-modelの実体はv-bindとv-on:inputが組み合わさったもので、 都度イベント発生することで処理が実行されているということを理解しておきましょう。

つまり、v-on:clickとかv-on:changeとかイベント発生するものと共用できないのです。
詳しくは↓

vueでポップアップ作ろうとclickとv-modelを共用させたらうまく処理されなかった件

clickでv-modelが反映されないんですけど…？こうした悩みを解決します。 立科プログラミングではサイトの新規構築、既存サイトの機能追加・修正、動作不具合解析など行っております。こういう見た目にしたい、この機能を少し直したいなどお困り...

tatepro.com

methodsとcomputedの違い

区別としてmethodsは関数、computedは算出プロパティとなりますが、どちらも演算ができます。
大きな違いはキャッシュ機能の有無です。
methodsはキャッシュがなくページリロードにより変数が初期化されますが、computedはキャッシュを有し変数が保持されます。

あとで書きます。