制作環境

Windows 10
Vue.js 2.6.11
Visual Studio Code

はじめに

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

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

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

Formのinput等で、Vueからデータを渡したり、Vueにデータを受け取ったりすること。

※一部省略

<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 (省略形 : )とは

役割

属性とプロパティを紐付ける。

書き方

V-bind:value="sample"

省略形の書き方

:value="sample"

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

V-on (省略形 @ )とは

役割

イベントリスナー設置し、イベントを監視する。

書き方

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

省略形の書き方

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

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

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

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

書き方

v-model="test.sample"

★ポイント★
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の場合

<!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の場合

<!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

複雑な内容を設定できる。
細かく設定を行いたい場合に最適。

V-model

シンプルな記述で機能を実装できる。
修飾子が使用できる。

修飾子とは

追加で設定できる機能のこと。

修飾子 .lazy

リアルタイムに値を反映せず、フォーカスが外れた際に値を反映させる。

記述サンプル

<!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

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

修飾子 .trim

入力された値から不要な空白(スペース)を取り除く。
入力値に不要な空白があるさいに、自動的に取り除いてくれる。