はじめに

こんばんは。

この記事からだいぶ間が空きましたけど、vueまたやり始めます。

なかなかモチベーションが上向きにならないんですが、頑張ってブログ書くというモチベーションだけは続いているので、気合ですよね気合。

codeprepにvueのブックがあったので、思い出しがてらやってみました。

やってみた

v-show(表示・非表示)

v-if でもおんなじことやれるけど、こういうのもあるみたい。

 <div id="app">
     <p v-show="is_show">表示だよ！</p>
 </div>
 
 <script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            is_show: 1
        }
    });
</script>

f:id:kojirooooocks:20180814015848g:plain

v-if vs v-show

v-if = falseの場合は、描画されなくて、v-showの場合はcssのプロパティを変更するだけみたい。

使う場所がかなり違いそうだな。

算出プロパティ

以下のような、なんらか処理が必要を噛まして、その結果を表示したい場合に使える技みたい。

<div id="app">
    <p>{{ deliveryAnswer }}</p>

    <select name="delivery_date_list" v-model="delivery_date_list">
        <option value="">選択してください</option>
        <option value="1">2018-08-10</option>
        <option value="2">2018-08-11</option>
        <option value="3">2018-08-12</option>
        <option value="4">2018-08-13</option>
        <option value="5">2018-08-14</option>
        <option value="6">2018-08-15</option>
        <option value="7">2018-08-16</option>
    </select>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            delivery_date_list: "",
        },
        computed: {
            deliveryAnswer: function() {
                if (this.delivery_date_list === '') {
                    return ;
                }

                let result = "配送可能";
                if (parseInt(this.delivery_date_list) >= 4) {
                    result = "配送できません";
                }

                return result;
            }
        }
    });
</script>

f:id:kojirooooocks:20180814015951g:plain

普通に関数使って

deliveryAnswer() って感じで呼び出すのと何が違うのかな？と思ってたら、公式に書いてた。

算出プロパティ vs メソッド

算出プロパティはキャッシュされるようだ。

ちゃんとした違いがあった。

ウォッチャー

そのまんま、データの変更の監視を行ってくれる。

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            deliveryAnswer: '',
            delivery_date_list: "",
        },
        watch: {
            delivery_date_list: function (new_value, old_value) {
                let result = "配送可能";
                if (parseInt(this.delivery_date_list) >= 4) {
                    result = "配送できません";
                }

                this.deliveryAnswer = result;
            }
        }
    });
</script>

f:id:kojirooooocks:20180814020030g:plain

使い方的には以下、

ウォッチャ

非同期やコストの高い処理を実行したいときに最も便利

だそう。

ウォッチャーは非同期通信を行う際のイベントを検知するもので、算出プロパティは、ロジックをhtml内に入り込ませないようにするための機能って覚えとく(キャッシュもあるしね)

フィルター

渡された値を別の値に変換する機能。

<div id="app">
    <p>{{ message | label }}</p>
    <input type="text" v-model="message">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: ""
        },
        filters: {
            label: function(value) {
                if (value === '') {
                    return value;
                }

                return "あなたの名前: " + value;
            }
        }
    });
</script>