Vue.js 基本 メモ

使用させていただいたもの

Vue.js 公式ドキュメント
たった30分でわかるVue js入門
Vue.jsについて|チームラボオンラインスキルアップ
【Vue.js】記法の違いまとめ|Qiita
Vueのプロパティを分かりやすくする|Qiita

Vue.js の導入

CDNとnpmがあるが、練習や小規模な開発ならCDNがお手軽。
HTMLファイルに１行書くだけでOK

<!-- 練習用に常に最新バージョンを読み込むことができるCDN -->
<script src="https://unpkg.com/vue@next"></script>

codepenを使用したのですが、v3系のCDNを読み込んでもなぜか動かず、
仕方なくv2.6.11を使用しました。

変数 data

Vueクラスを宣言し、その中にel(エレメント）を指定する。
指定したエレメントと対応するid（ここではapp、js上では#app）を持つHTML要素に対して、様々にVue.jsから変化を加えることができる。

See the Pen Untitled by Katsuya Aoki (@aoook94) on CodePen.

また、data:{}の中に変数を定義することができる。
count:0のように変数名:代入する値で定義する。
そして、定義した変数は{{count}}のように、{{変数名}}で変数に代入された値をHTML上に出力することができる。
{{$data.変数名}}でも同じ。こちらの書き方のほうがわかりやすい。

See the Pen Vue.js9 by Katsuya Aoki (@aoook94) on CodePen.

変数には、data:function(){return{～}}のように関数として定義する方法がある。
コーポネントとして使用する場合は、この書き方でなければならない。

また、下記のように省略が可能。

new Vue({
  el: '#app',
  data: function() {
    return {
      hoge: hoge
    };
  },
  //省略形
  data() {
    return {
      huga: huga
    };
  },
});

基本的に変数は関数として定義すれば問題ないかと思います。

メソッド methods

Vueクラスの中には、メソッド（関数）も定義することができる。

See the Pen Untitled by Katsuya Aoki (@aoook94) on CodePen.

methods:{}の中に関数名:function(){処理}でメソッドを定義する。
ここでは、アラートを表示するメソッドを定義し、ボタンをクリックすることで実行される。
そのために、対象となるbuttonタグにv-の接頭辞を持つディレクティブをHTML要素の属性として持たせている。（詳しくは後述。v-on:click="alert"で、クリックされた時にalertメソッドが実行される）

また、下記のように省略が可能。

new Vue({
  el: '#app',
  methods: {
    alert: function(){
      alert("test")
    }
  }
  //省略形
  methods: {
    alert() {
      alert("test")
    }
  }
});

See the Pen Untitled by Katsuya Aoki (@aoook94) on CodePen.

また、定義したメソッド内では、同じクラス内で定義した変数を使用することができる。
this.変数名とすることで、変数をメソッド内で呼び出すことができる。
ここでは、this.countで変数を呼び出し、値を変更するメソッドを定義している。
一つ前の例と同様に、対象のv-on:clickを属性に持つHTML要素がクリックされたときにメソッドが実行され、{{count}}の値が変更される。

ディレクティブ

ディレクティブとは、Vue.jsによってあらかじめ用意された属性でv-の接頭辞がついている。
ディレクティブをHTML要素に属性としてもたせることで、条件分岐や繰り返し処理など様々な動きを加えることを可能にする。

v-bind属性

HTML要素の開始タグ内でv-bind:HTMLの属性="変数名"として使用する。
HTMLの属性とは、title属性やclass属性、src属性、href属性、datetime属性などである。
v-bindを使用することで、指定した変数名に代入された値を任意のHTMLの属性の値とすることができる。

See the Pen Vue.js 4 by Katsuya Aoki (@aoook94) on CodePen.

ちなみに、下記の用法は不可。

<p title="{{message}}" >マウスホバーをするとtitle属性が表示されます</p>

{{変数名}}はHTML要素の内容としてのみ使用可能であり、タグ内部では使用できない。

また、下記のように省略が可能。

  <p v-bind:title="hoge"></p>
  <p :title="hoge"></p> #省略形

v-if属性

HTML要素の開始タグ内でv-if="条件式"として使用する。
条件式がtureの場合にv-ifを属性としてもつHTML要素を出力する。

See the Pen Untitled by Katsuya Aoki (@aoook94) on CodePen.

v-for属性

HTML要素の開始タグ内でv-for="変数 in 配列"として使用する。
配列に含まれる要素の数だけ繰り返して変数に代入し、v-forを属性としてもつHTML要素を出力する。

See the Pen Vue.js 6 by Katsuya Aoki (@aoook94) on CodePen.

v-on属性

HTML要素の開始タグ内でv-on:イベント="メソッド名"として使用する。
イベントの代表例として挙げられるのがclickイベントである。
指定したイベントを検知する（v-on:clickの場合は対象のHTML要素がクリックされる）ことで、任意のメソッドを実行させることができる。

※使用例は既出のため省略

また、下記のように省略が可能。

  <p v-on:click="hoge"></p>
  <p @click="hoge"></p> #省略形

v-model属性

主にinputタグ内でv-model="変数"として使用する。
v-modelを属性としてもつHTML要素が受け取った値を指定した変数に代入することができる。

See the Pen Vue.js 7 by Katsuya Aoki (@aoook94) on CodePen.

下記はv-modelとv-bindを組み合わせた例である。
v-model属性をもつselectタグが、受け取ったoptionタグの値をcolor変数に代入し、v-bind属性によって、pタグにclass属性として与えている。

See the Pen Vue.js 8 by Katsuya Aoki (@aoook94) on CodePen.

あとがき

2022年4月現在、プログラミング学習歴7ヶ月ほど。
jQueryというかjavascriptにはどうも苦手意識があったのですが、Vue.jsはいまのところ分かりやすいです。
といってもまだまだ初歩の初歩ですが。

あと、CodePenをはじめて使ってみましたが
ちょっとしたコードを書いたり、見返したり、記事にコピペで埋め込めたり便利です。
（Vue.jsの導入で少し苦労しましたが）

もっと詳しくVue.jsを学びたいと思うことができました。
今後も学んだことを記事にまとめていきたいと思います。

用語の使い方や言い回しがおかしいところがあれば優しく指摘していただけると助かります。