Vueチュートリアル第4編-Vueインスタンス化時の基本プロパティ

インスタンス要素el
インスタンス要素とは、Vueがインスタンス化されたときにコンパイルされたコンテナ要素、またはVueが作用する要素コンテナを指します.

    var vm = new Vue({
        el: '#app'
    })

インスタンス要素の他のセレクタを指定することもできます

    var vm = new Vue({
        el: '.app'
    })

複数のインスタンス要素を使用可能

    var vm = new Vue({
        el: '#app1'
    })
    var vm = new Vue({
        el: '#app2'
    })    

同じインスタンス要素が複数ある場合は、最初にのみ有効です.

    var vm = new Vue({
        el: '#app'
    })

インスタンス化時にインスタンス要素を指定せず、後で$mount()で手動でマウントすることもできます.

    var vm = new Vue({
        //option
    })

    vm.$mount("#app");
    

インスタンスからインスタンス要素を取得できます

    var vm = new Vue({
        el: '#app'
    })

    console.log(vm.$el)

データオブジェクトdata
MVVMモードではM(Model)データモデル層として機能し,より多くはM層をV層にマッピングすることに現れる

    

        
        {{key1}}
        
        {{key2 + key3}}
        
        {{key4.key4_1}}
        
        {{JSON.stringify(key5[0])}}
    

    var array = [{key5_1: "key5_1"}];
    var vm = new Vue({
        el: '#app',
        data: {
            key1: '  ',
            key2: 1,
            key3: 10,
            key4: {
                key4_1: 'key4_1'
            },
            key5: array
        }
    }

インスタンスからデータ・オブジェクトを取得できます

    var vm = new Vue({
        el: '#app',
        data: {}
    })

    console.log(vm.$data)

イベントプロセッサmethods
要素はv-on:イベント‖@イベントでバインドできます.イベントのthisはデフォルトでインスタンスvmを指します.

    

        
        {{count}}
    

    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        }
    })

以上の場合は単純な処理にのみ適用され、複雑な処理は単独で処理する必要があり、単純な処理にのみ適用され、複雑な処理は単独で処理する必要がある

    

        
        
         {{ counter }}  。
    

    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            counter: function(){
                this.count += 1;
            }
        }
    })

jsのイベントにはデフォルトでeventオブジェクトがあり、Vueはイベント上でeventオブジェクトを継承して2回カプセル化し、$eventと名前を変更し、イベントの中でデフォルトで転送します.

    

        
        {{count}}
    

    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            eventer: function(event){
                var _count = event.target.getAttribute('count') * 1;
                this.count += _count;
                event.target.setAttribute('count', _count);
            }
        }
    })

イベントでパラメータを渡す場合が多く、Vueはイベントでパラメータを渡すこともできます.

    

        
        {{count}}
    

    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            parameter: function(n, event){
                this.count += n;
                event.target.setAttribute('disabled', true);
            }
        }
    })

イベント効果のプレビュー
計算属性computed
computedは主にdataのプロパティに対して操作され、thisのポインタはデフォルトでインスタンスvmを指します.

    
{{reversedMessage}}

    data: {
        message: 'ABC'
    },
    computed: {
        reversedMessage: function(){
            return this.message.split('').reverse().join('')
        }
    }

レンダリング結果:

    
CBA

computedのプロパティにはデフォルトで2つのプロパティがあります.1つはgetです.getterと呼ばれ、もう1つはsetです.setterと呼ばれています.そのため、このように書くこともできます.

    data: {
        message: 'ABC'
    },
    computed: {
        reversedMessage: {
            get: function(){
                return this.message.split('').reverse().join('')
            }
        }
    }

Vレイヤで{reversedMessage}}を呼び出すと自動的にreversedMessageがトリガーされます.get()
setterの論理も同様で、対応する属性を変更するとsetメソッドが自動的にトリガーされます

    

        
        
{{fullName}}
        
        
        
    

    var vm = new Vue({
        el: '#app',
        data: {
            firstName:'DK',
            lastName: 'Lan',
            newName: ''
        },
        computed: {
            fullName:{
                get: function(){
                    return this.firstName + '.' + this.lastName
                },
                set: function(newValue){
                    this.firstName = newValue
                }
            }
        },
        methods: {
            changeName: function(){
                this.fullName = this.newName;
            }
        }
    })

Vueはgetter上で対応する属性に基づく依存キャッシュを行い,すなわち同じ属性を複数回呼び出し,getは1回しか実行しない.イベントはトリガーされるたびに呼び出されます.もちろん、プロパティ値を変更するたびに呼び出されます.

    

        
        
{{fullName}}
        
{{fullName}}
        
{{fullName}}
        
        
    

    var vm = new Vue({
        el: '#app',
        data: {
            firstName:'DK',
            lastName: 'Lan',
            newName: ''
        },
        computed: {
            fullName:{
                get: function(){
                    return this.firstName + '.' + this.lastName
                },
                set: function(newValue){
                    this.firstName = newValue
                }
            }
        },
        methods: {
            changeName: function(txt){
                this.newName = txt;
                //        this.fullName   ，            getter
            }
        }
    })

計算プロパティ効果プレビュー
Listener watch
Vueは、単一のプロパティに対するリスナーを提供し、そのプロパティが変更されると自動的にトリガーされ、この使用が不適切になるとパフォーマンスに影響を与えるため、慎重に使用します.

    
    
  ：{{aOldVal}}
    
  ：{{aNewVal}}
    

    {
        data: {
            a: 1
        },
        watch: {
            a: function (newVal, oldVal) {
                //       
                console.log('new: %s, old: %s', newVal, oldVal)
            },
        }    
    }

メソッドをdataオブジェクトに配置することもできます

    {
        data: {
            a: 1,
            changeA: function (newVal, oldVal) {
                //       
                console.log('new: %s, old: %s', newVal, oldVal)
            }
        },
        watch: {
            a: 'changeA'
        }    
    }

watchとcomputeの違い:

computedは新しい属性を作成し、watchはdataの既存の属性

を傍受する.

computeは依存キャッシュ

を生成する.

watchがcomputedを傍受する場合、watchはこの場合無効であり、computedのみがトリガー.setter

    {
        computed: {
            a: {
                get: function(){
                    return '';
                },
                set: function(newVal){
                    //     
                    console.log('set val %s', newVal);
                }
            }                 
        },
        watch: {
            a: function(){
                //     
                console.log('watch');
            }
        }    
    }

Listenerエフェクトプレビュー