[Vue.js] Vue.jsを学ぶ① 

## はじめに
今回はゼロからVue.jsについて学んだため備忘録として書きました。
環境設定からディレクティブまでです。

## 環境設定
### 読み込み方法
1. CDN　　**一番簡単**
HTMLのbodyの終了タグの直前に以下を入力する
```vuejs:CDN
<script src="https://unpkg.com/vue@3.1.5"></script>
```
1. 直接読み込み(ファイルをダウンロードして配置)
1. NPM(パッケージ管理ソフトの利用)
1. Vue CLIを使ってプロジェクトの基礎を作る

:::note
Vue.jsを読み込んでからJavaScriptを読み込む
:::


### VSコードでオススメの拡張機能
[**Vetur**](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
Vueに特化した拡張機能で以下のことが可能

- シンタックスハイライト
- スニペット
- Emmet
- リンティング/エラーチェック
- フォーマット
- インテリセンス
- デバッグ

[**Live Server**](https://github.com/ritwickdey/live-server)
HTMLやCSSを自動でリロードしてくれる便利機能です。

## 覚えておきたいもの
### なぜVue.jsが人気なのか
学習コストが低いから！！！！

:::note
Vue.jsを使用することによりコードが短く、開発効率をあげることができる
:::


### テンプレートとは
HTMLベースのテンプレート構文を使用した、描画部分に関する記述のこと

### マスタッシュ構文
`{{変数名}}`とすることでVueに定義したdataの変数をコンポーネントやテンプレートに埋め込むことができる

:::note
属性にマスタッシュ構文は使用できない
:::

### データバインディングとは
データと描画を同期する仕組みのこと

### リアクティブとは
各要素をつなげて反応的に変化させること（excelのイメージ）


## インスタンスの生成
`new Vue`でインスタンスを作成し、その中のel要素でTHML側のどの部分を対象としてVueを使用するか定義することができる
```vuejs:HTML
<div id='app'>  <!--id名は任意に設定 -->
</div>
```
```javascript:js
const 変数名(app or vm) = Vue.createApp({
  //option
})

app.mount('#app)  //mountメソッドの呼び出しが必要
```
:::note
最後のセミコロンは付けるか付けないか意見が分かれる
:::

## リアクティブデータを定義
マスタッシュ構文を使用し実現
```HTML
<div id='app'>  
    <p>{{ message }}</p>
</div>
```
```javascript:js
const 変数名(app or vm) = Vue.createApp({
  data: () => ({
  message: 'Hello Vue.js!'
  })
})

app.mount('#app)  //mountメソッドの呼び出しが必要
```
`{{}}`を使用した部分が、`Hello Vue.js!`に置き換わる
→　テキストコンテンツの一部がデータバインディングしているため

:::note
アロー関数でも関数式どちらで書いてもOK
:::


## ディレクティブ
v-から始まるデータバインディング（HTMLとjavascriptを紐づける）を行うための機能でVue.jsに何らかの指示を行う
- v-bind
- v-if
- v-show
- v-on
- v-mode

### v-bind
`v-bind`でタグ属性の値をVueインスタンス内で定義した変数で表現する際に使用
```html:HTML
<a v-bind:href="url">Google</a>
// 元はこれ
<a href="https://www.google.com/">Google</a>
```
```javascript:js
<script>
        const app1 = Vue.createApp ({
            data: () => ({
               url: 'https://www.google.com/'
            }),
               
            }
        })
</script> 
```
v-bind:hrefは:hrefに省略できる

:::note
属性にはマスタッシュ構文ではなくv-bindを使用する
:::

### v-on 
イベントを加えると、Vueインスタンスのメソッドを呼び出すことができる
**構文**
`v-on:イベント名="メソッド名"`
```HTML:HTML
<div id='app'>
  <p>{{ message }}</p>
  <button v-on:click='reverse'>Click!</button>
</div>
```
```javascript:js
const app = Vue.createApp({
  data: () => ({
    message: 'Hello Vue.js!'
  }),
 methods: {
    reverse: function(){
      this.message = this.message.split('').reverse().join('');
    }
  }
})
app.mount('#app')
```
:::note
　v-on:clickは@clickに省略可能
:::
以下、省略した書き方
```HTML:HTML
<div id='app'>
  <p>{{ message }}</p>
  <button @click='reverse'>Click!</button>
</div>
```

**this**：プロパティを示す

### v-model
　フォームのinput、textarea、select要素に双方向バインディング（「入力フォーム⇆Vue変数」の同期）を実現する際に使用
 ```HTML:HTML
 <div id='app'>
  <input type='text' v-model='message'>
  <p>{{ message }}</p>
</div>
```
```javascript:v-model
const app = Vue.createApp({
  data: () => ({
    message: 'Hello VueJS!'
  })
})
app.mount('#app')
```

**修飾子**
`v-model`は修飾子により動作を変更できる
1. `.lazy`: バインドのタイミングを遅延させる
1. `.trim`: 入力値から前後の空白を削除してからデータに代入
1. `.number`: 入力値を数値型に型変換してからデータに代入する

### v-if
条件に応じて表示させるhtml要素を動的に変更する際に使用
```HTML:HTML
<!--要素を表示/非表示に切り替える-->
<div id='app'>
  <p v-if="toggle">Hello</p>
</div>
```
```javascript:v-if
const app = Vue.createApp({
  data: () => ({
    toggle: false   //trueは表示、falseの時は非表示
  })
})
app.mount('#app')
```
- 要素をDOMから削除・追加することで要素の表示・非表示を行う
- `v-else`、`v-else-if`が使える


### v-for
繰り返しを実現できる
```HTML:HTML
<!-- dataオプションに登録した、配列の値を番号付きのリストで表示 -->
<div id='app'>
  <ol>
    <li v-for="color in colors"> {{ color }} </li>
</div>
```
```javascript:v-if
const app = Vue.createApp({
  data: () => ({
    colors: ['Red', 'Green', 'Blue']
  })
})
app.mount('#app')
```
**オブジェクトの繰り返し**
`v-for="value in オブジェクト名`とする


### v-show
要素のディスプレイCSSプロパティを切り替えることで表示・非表示にできる
```HTML:HTML
<div id="app">
    <p v-show="toggle">Hello Vue.js!</p>
  </div>
```

```javascript:v-show
const app = Vue.createApp({
  data: () => ({
   toggle: true
  })
})
app.mount('#app')
```
:::note
**注意点**
v-elseとは連動しない
:::





 ## 参考
 [Udemy講座](https://www.udemy.com/course/learn-vuejs/)
 [Vue.jsのコーディングに便利なVisual Studio Code＋Vetur](https://johobase.com/vue-js-visual-studio-code-vetur/)