tinyVue(version:0.1.0)---支持computed屬性、watch監控，自定義指令

re-vue

rewrite vue.js.

包含一個比較完整的基本項目，webpack打包、mocha測試、eslint代碼校驗.

online demo

源碼分析:https://github.com/xiaofuzi/deep-in-vue

特性

• 雙向綁定

• 計算屬性

• 事件支持

• watch監測

• 生命週期函數

• 自定義指令

Usage

example:

<div id="app">
    <h2 v-text='hello' v-visible='isShow'></h2>
    <input type="text" v-model='counter'>
    <button v-on:click='add' type="button">add</button>        
    <button v-on:click='toggle' type="button">toggle</button>
    <p v-text='counter'></p>
    <p v-text='info.age'></p>
    <p v-text='wellcome.text'></p>
</div>

var mvvm;
var opts = {
    el: '#app',
    data: {
        isShow: false,
        counter: 1,
        hello: 'ahahah!',
        info: {
            age: 18
        },
        person: {
            weight: 20,
            height: 170
        }
    },
    computed: {
        wellcome () {
            return {text: this.hello + '---' + this.info.age};
        }
    },
    methods: {
        add: function () {
            this.counter += 1;
            this.info.age += 1;
        },
        toggle: function () {
            this.isShow = !this.isShow;                    
        }
    },
    watch: {
        counter (val) {
            console.log('counter: ', val);
        },
        info (info) {
            console.log('info: ', info);
        },
        'info.age' () {

        },
        wellcome () {
            console.log('wellcome: ', this.wellcome);
        }
    },
    ready () {
        let self = this;
        self.hello = 'Ready, go!';
        
        setTimeout(function () {
            self.hello = 'Done!';
        }, 1000)
    }
}

TinyVue.$directive('visible', function (value) {
    this.el.style.visibility = value ? 'visible' : 'hidden';
})
mvvm = new TinyVue(opts);

• el

Type: String | Node

根節點選擇器或是根節點dom元素。

• data

Type: Object

初始化響應式數據模型

• computed

Type: Object

計算屬性，每個元素對應一個函數

注：

* computed屬性依賴於data中的響應式數據
* computed屬性可依賴computed屬性
* computed禁止賦值操做

• methods

Type: Object
每個元素對應一個函數，支持響應式替換

• watch

Type: Object

監測對象，監測對應的響應式數據，當數據發生更改時執行回調.

• $watch

Type: Function
監測某一數據的響應式變化

如：

var vm = new TinyVue({
    data: {
        info: {
            age: 18
        }
    }
});
vm.$watch('info', function (info) {
    
});

vm.$watch('info.age', function (age) {
    
})

• $directive

Type: Function

自定義指令

如：

vm.$directive('text', function (text) {
    this.el.textContent = text;
});

• beforeCompiler

生命週期函數，編譯前執行

• ready

生命週期函數，渲染完畢後執行

Install

npm install tiny-vue --save