Vue.js(算出プロパティ(getter・setter)・nextTick)(Laravel使用)

5367 ワード
チュートリアル Vue.js Laravel Laravel テキストリンク

参考記事をもとに進めさせていただきます。

◆算出プロパティ

処理を含めることができるデータで、メソッドとの違いは結果をキャッシュできるため、処理を高速にさばくことができます。
メソッドと算出プロパティの違い

<body>
    <div id="sample">
        @{{ one }}の2倍は、@{{ double }}
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            one: 1
        },
        computed: {
            double(){
                return this.one * 2
            }
        }
    });
</script>

◆ゲッター・セッター

上の例では、データを基に計算した値を返すゲッターの役割を担っていましたが、セッターとゲッター両方設定することが可能です。

<body>
    <div id="sample">
        <input type="text" v-model.number="one">
        <input type="text" v-model.number="double">
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            one: 1
        },
        computed: {
            double:{
                get(){
                    return this.one * 2;
                },
                set(double){
                    this.one = double / 2;
                }
            }
        }
    });
</script>

v-model.numberを使用して、数字入力でデータを同期させて、getでは、oneの値が変わると、doubleの値も変わります。
doubleから入力すると、oneの値がsetされるようにしました。

◆ウォッチャ

算出プロパティは元のデータが変更されると処理が走ります。
ウォッチャもデータの変更があったときに、処理が走ります。基本的には算出プロパティを使用すればよいのですが、非同期処理なんかの時はウォッチャを利用したほうが良いです。
参考記事

watch:{
    データ:function(新しい値,古い値){}
}

個別に指定するときの指定の仕方

this.$watch(データ, function(新しい値,古い値){}, オプション)

◆フィルタ

フィルタを利用することで、数字や文字に細工ができます。
{{データ | フィルタ名}}で指定できます。

<body>
    <div id="sample">
        @{{price | localeNum}}
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            price: 3000000000000
        },
        filters:{
            localeNum(price){
                return price.toLocaleString();
            }
        }
    });
</script>

javaScriptのtoLocaleStringを利用して、3桁ずつ数字を区切るようにしています。
ちなみにfilterに引数を持たせることも可能です。

◆カスタムディレクティブ

v-bindのようなものを自作できる機能です。下の階層のDOMにアクセスする必要がある場合に使用します。
カスタムディレクティブ

<body>
    <div id="sample">
        <input type="text">
        <input type="text" v-focus>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        }
    });
</script>

directivesに登録することで使用でき、insertedは要素が挿入されたときです。今回ならv-focusをもつinputタグのほうにfocusを充てるようにしました。

◆nextTick

更新後のDOMにアクセスする際に、nextTickを利用します。用途は、データ更新後DOMにアクセスしたときにタイムラグが発生し、思い通りのデータが取得できないことを、nextTickを使えば、更新後に読むので防げます。

<body>
    <div id="sample">
        <div ref="message">
            <p>@{{ message }}</p>
        </div>
        <button @click="addMessage">メッセージ追加</button>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            message: ''
        },
        watch: {
            message() {
                console.log(this.$refs.message.clientHeight);

                this.$nextTick(function () {
                    console.log(this.$refs.message.clientHeight);
                })
            }
        },
        methods: {
            addMessage(){
                this.message = 'sample';
            }
        }
    });
</script>

this.$nextTickの中で、更新後にしたい処理を記述します。
一つ目のconsole.logでは、ボタンを押したときの高さは取得できません。
二つ目のconsole.logでは、更新後に高さを取得するので、高さを取得することができます。

レポートのエクスポート方法
cv::Matとstd::vectorの相互変換