初寫vue的構造器和屬性與方法

Vue 實例

一、構造器

什麼是構造器

Vue.extend返回的是一個「擴展實例構造器」，也就是預設了部分選項的Vue的實例構造器

【案例】

<div id="app"></div>
<script>
    // 建立構造器
    var aa = Vue.extend({
        template: '<p>{{firstName}} {{lastName}} 學習 {{alias}}</p>',
        data: function () {
            return {
            firstName: '我正在',
            lastName: '努力',
            alias: 'Vue'
            }
        }
    })
    // 建立 aa 實例，並掛載到一個元素上。$mount()方法手動掛在
    new aa().$mount('#app')
</script>
打印結果爲：我正在 努力 學習 Vue

二、屬性與方法

每一個 Vue 實例都會代理其 data 對象裏全部的屬性

屬性

【案例】

<div id="example">{{a}}</div>
<script>
    var data = { a: 1 }
    var vm = new Vue({
        el: '#example',
        data:data
    })
    vm.a === data.a // -> true
    // 設置屬性也會影響到原始數據
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3    
</script>

注意上面的案例證實 只有這些被代理的屬性是響應的，也就是說值的任何改變都是觸發視圖的從新渲染。

$watch()方法

下面咱們作一個小案例就能夠了解$watch()方法

<div id="watch">
    firstName:<input type="text" name="li"  v-model="firstName">
    <br>
    lastName:<input type="text" name="fei"  v-model="lastName">
    <p>fullName: {{fullName}}</p>
</div>
<script>
//方法
    // $watch 是一個實例方法   說白了就是觀察一個值得變化(實時監聽)
    var vm = new Vue({
        el: '#watch',
        data: {
            firstName: 'a',
            lastName: 'fei',
            fullName: 'a fei'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
    
</script>

上面方法的結果以下圖

https://github.com/wujian1994...
https://wujian1994.github.io/...

若是對你有所幫助，那是我最大的榮幸。

對了，兄臺，若是對你有幫助的話不妨點個收藏或者推薦再走。