Vue 教程第四篇—— Vue 實例化時基本屬性

實例元素 el

實例元素指的是 Vue 實例化時編譯的容器元素，或者說是 Vue 做用的元素容器

<div id="app"></div>

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

也能夠爲實例元素指定其它選擇器

<div class="app"></div>

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

能夠有多個實例元素

<div id="app1"></div>
    <div id="app2"></div>

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

若是有多個相同的實例元素則只有第一個起效

<div id="app"></div>
    <!--這個只當普通 html 輸出，不會被 Vue 編譯-->
    <div id="app"></div>

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

也能夠在實例化的時候不指定實例元素，後面用 $mount() 手動進行掛載

<div id="app"></div>

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

    vm.$mount("#app");

能夠經過實例獲取實例元素

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

    console.log(vm.$el)

數據對象 data

在 MVVM 模式中充當着 M(Model) 數據模型層，更多的體現於將 M 層映射到 V 層

<div id="app">
        <!--結果爲：文本-->
        <span>{{key1}}</span>
        <!--結果爲：11-->
        <span>{{key2 + key3}}</span>
        <!--結果爲：key4_1-->
        <span>{{key4.key4_1}}</span>
        <!--結果爲：{"key5_1": "key5_1"}-->
        <span>{{JSON.stringify(key5[0])}}</span>
    </div>

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

<div id="app">
        <input type="button" @click="count += 1" value="監聽事件">
        <span>{{count}}</span>
    </div>

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

上面的狀況僅適用於很簡單的處理，複雜的處理能夠須要單獨處理上面的狀況僅適用於很簡單的處理，複雜的處理能夠須要單獨處理

<div id="app">
        <input type="button" value="確認" @click="counter"/>
        <p>確認按鈕被點擊了 {{ counter }} 次。</p>
    </div>

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

在 js 的事件中默認會有個 event 對象，Vue 在事件上對 event 對象進行繼承二次封裝，更名爲 $event，在事件當中默認傳過去

<div id="app">
        <input type="button" @click="eventer" count="1" value="event 對象">
        <span>{{count}}</span>
    </div>

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 也能夠在事件中傳參數

<div id="app">
        <input type="button" @click="parameter(10, $event)" value="事件傳參數">
        <span>{{count}}</span>
    </div>

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

<p>{{reversedMessage}}</p>

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

渲染結果爲

<p>CBA</p>

在 computed 的屬性中默認有兩個屬性，一個是 get，咱們稱之爲 getter，另外一個是 set，咱們稱之爲 setter，因此也能夠這樣寫：

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

當咱們在 V 層調用 {{reversedMessage}} 的時候會自動觸發 reversedMessage.get()

setter 的邏輯也是同樣，當改變對應的屬性時，會自動觸發 set 方法

<div id="app">
        <!--調用了 fullName.get()-->
        <p>{{fullName}}</p>
        <input type="text"  v-model="newName">
        <!--changeName 事件改變了 fullName 的值，因此會自動觸發 fullName.set()-->
        <input type="button" value="changeName" @click="changeName">
    </div>

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 只會執行一次。而事件在每次觸發時都會被調用，固然在改變該屬性值的時候會再次被調用

<div id="app">
        <!--fullName.get 只被調用一次-->
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
        <!--每次點擊都會調用 changeName-->
        <input type="button" value="changeName" @click="changeName('Vue')">
    </div>

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
            }
        }
    })

計算屬性效果預覽

監聽器 watch

Vue 提供了對單個屬性的監聽器，當該屬性發生改變的時候，自動觸發，此項使用不當會影響性能，因此慎用。

<input type="text" v-model="a">
    <p>舊值：{{aOldVal}}</p>
    <p>新值：{{aNewVal}}</p>

{
        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 區別：

1. computed 建立新的屬性， watch 監聽 data 已有的屬性
2. compute 會產生依賴緩存
3. 當 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');
            }
        }    
    }

監聽器效果預覽