Vue.js 基本 メモ

## 使用させていただいたもの
[Vue.js 公式ドキュメント](https://jp.vuejs.org/)
[たった30分でわかるVue js入門](https://www.youtube.com/watch?v=JxXtAsHR4K0)
[Vue.jsについて|チームラボオンラインスキルアップ](https://team-lab.github.io/skillup-nodejs/vuejs.html#%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)
[【Vue.js】記法の違いまとめ|Qiita](https://qiita.com/aiandrox/items/788c1846ef17094264a2)
[Vueのプロパティを分かりやすくする|Qiita](https://qiita.com/wintyo/items/e6918779b837b209a1e3)

## Vue.js の導入
CDNとnpmがあるが、練習や小規模な開発ならCDNがお手軽。
HTMLファイルに１行書くだけでOK
```html
<!-- 練習用に常に最新バージョンを読み込むことができる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から変化を加えることができる。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYppELV" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/zYppELV">
  Untitled</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYeQVZo" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/LYeQVZo">
  Vue.js9</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

また、下記のように省略が可能。
```javascript
new Vue({
  el: '#app',
  data: function() {
    return {
      hoge: hoge
    };
  },
  //省略形
  data() {
    return {
      huga: huga
    };
  },
});
```

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

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKZZvya" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/KKZZvya">
  Untitled</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

また、下記のように省略が可能。
```javascript
new Vue({
  el: '#app',
  methods: {
    alert: function(){
      alert("test")
    }
  }
  //省略形
  methods: {
    alert() {
      alert("test")
    }
  }
});
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWrrxNy" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/MWrrxNy">
  Untitled</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

また、定義したメソッド内では、同じクラス内で定義した変数を使用することができる。
`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の属性の値とすることができる。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYppQGJ" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/zYppQGJ">
  Vue.js 4</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ちなみに、下記の用法は不可。
```html
<p title="{{message}}" >マウスホバーをするとtitle属性が表示されます</p>
```
`{{変数名}}`はHTML要素の内容としてのみ使用可能であり、タグ内部では使用できない。

また、下記のように省略が可能。
```html
  <p v-bind:title="hoge"></p>
  <p :title="hoge"></p> #省略形
```

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLppWvq" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/yLppWvq">
  Untitled</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYppwzX" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/vYppwzX">
  Vue.js 6</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

また、下記のように省略が可能。
```html
  <p v-on:click="hoge"></p>
  <p @click="hoge"></p> #省略形
```


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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvppLKj" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/wvppLKj">
  Vue.js 7</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNppELB" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/rNppELB">
  Vue.js 8</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

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