Vue.js 2.x V-model と V-bind V-on について

#制作環境

Windows 10
Vue.js 2.6.11
Visual Studio Code

#はじめに

この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

Laravelを独学で勉強中なのですが、Vue.jsについても知っておきたかったので、メモとして残してます。

#双方向データバインディング (Two-way Data Binding)

<font color="blue">Formのinput等で、Vueからデータを渡したり、Vueにデータを受け取ったりすること。</font>

※一部省略

```JavaScript
<input :value="sample" @input="sample = $event.target.value">

let app = new Vue({
    el: '#app',
    data () {
        return {
            sample: '',
        }
    },
})
```

上の場合は、`Vue`の`sample`の値を`:Value`に渡し、`input`に入力された値を`Vue`の`sample`で受け取っています。

#V-bind (省略形 : )とは

##役割
<font color="blue">**属性とプロパティを紐付ける。**</font>

##書き方

```JavaScript
V-bind:value="sample"
```

###省略形の書き方

```JavaScript
:value="sample"
```

この場合は`Vue`の`sample`プロパティを`value`に紐付けている。

#V-on (省略形 @ )とは

##役割

<font color="blue">**イベントリスナー設置し、イベントを監視する。**</font>

##書き方

```JavaScript
V-on:click="指定のメソッド"
```

###省略形の書き方

```JavaScript
@click="指定のメソッド"
```

上の場合は、クリックイベントが発生した時に、`Vue`に記述してある指定のメソッド(関数)処理を行う。

#V-model (省略形 ナシ )とは

<font color="blue">**form の input 要素またはコンポーネント上に双方向バインディングを作成する。**</font>
イメージとしては、`V-bind`と`V-on`を両方設置してくれる感じ。

##書き方

```JavaScript
v-model="test.sample"
```

<font color="red">**★ポイント★**</font>
`V-model`はタグによって設定される`V-bind`と`V-on`の項目が異なる。

|タグ|V-bind|V-on|
|:---|:---|:---|
|input,textarea|value|input|
|checkbox,radio|cheked|change|
|select|value|change|

#記述サンプル

##V-bindとV-onの場合

```HTML
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <title>サンプル</title>
</head>

<body>
    <div id="app">
        <input :value="sample" @input="sample = $event.target.value"> {{ sample }} <br>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    sample: 'テスト',
                }
            },
        })
    </script>
</body>

</html>
```

##V-modelの場合

```HTML
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <title>サンプル</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="sample"> {{ sample }} <br>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    sample: 'テスト',
                }
            },
        })
    </script>
</body>

</html>
```

#それぞれの特徴

##V-bindとV-on

<font color="blue">**複雑な内容を設定できる。**</font>
細かく設定を行いたい場合に最適。

##V-model

<font color="blue">**シンプルな記述で機能を実装できる。**</font>
修飾子が使用できる。

###修飾子とは

<font color="blue">**追加で設定できる機能のこと。**</font>

##修飾子 .lazy

<font color="blue">**リアルタイムに値を反映せず、フォーカスが外れた際に値を反映させる。**</font>

###記述サンプル

```HTML
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <title>サンプル</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model.lazy="sample"> {{ sample }} <br>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    sample: 'テスト',
                }
            },
        })
    </script>
</body>

</html>
```

##修飾子 .numbar

<font color="blue">**値をを文字列ではなく、数値として変換してくれる。**</font>
inputに入る値は基本文字列として扱われるが、電話番号等数値として扱いたい場合にこれを付けると、文字列型を数値型に変換してくれる。
<font color="red">**ただし、数値を全角で入力した場合は文字列として扱われ、数値型にならない。必ず半角で入力させる必要がある。**</font>

##修飾子 .trim

<font color="blue">**入力された値から不要な空白(スペース)を取り除く。**</font>
入力値に不要な空白があるさいに、自動的に取り除いてくれる。