支持watch监测、计算属性、自定义指令
发布于 1年前 作者 ab8512 1500 次浏览 来自 分享

源码:https://github.com/xiaofuzi/re-vue/tree/9de26c017dc937e19faec6b962d28a444cea7af4

API

  • 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: </span>Function<span class="pl-pds">

自定义指令

如: </span><span class="pl-pds">`js vm.$directive('text’, function (text) { this.el.textContent = text; });

  • beforeCompiler
    生命周期函数,编译前执行

  • ready
    生命周期函数,渲染完毕后执行

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' () {
    },
    <span class="pl-en">wellcome</span> () {
        <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">'</span>wellcome: <span class="pl-pds">'</span></span>, <span class="pl-c1">this</span>.<span class="pl-smi">wellcome</span>);
    }
},
<span class="pl-en">ready</span> () {
    <span class="pl-k">let</span> self <span class="pl-k">=</span> <span class="pl-c1">this</span>;
    <span class="pl-smi">self</span>.<span class="pl-smi">hello</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>Ready, go!<span class="pl-pds">'</span></span>;
    
    <span class="pl-c1">setTimeout</span>(<span class="pl-k">function</span> () {
        <span class="pl-smi">self</span>.<span class="pl-smi">hello</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>Done!<span class="pl-pds">'</span></span>;
    }, <span class="pl-c1">1000</span>)
}

}

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

回到顶部