成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Coly / 2527人閱讀

摘要：包含一個比較完整的基本項目，打包測試代碼校驗源碼分析特性雙向綁定計算屬性事件支持監(jiān)測生命周期函數(shù)自定義指令根節(jié)點選擇器或是根節(jié)點元素。

re-vue

rewrite vue.js.

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

online demo

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

特性

雙向綁定

計算屬性

事件支持

watch監(jiān)測

生命周期函數(shù)

自定義指令

Usage

example:


    

    
            
    
    

    

    


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

根節(jié)點選擇器或是根節(jié)點dom元素。

data

Type: Object

初始化響應(yīng)式數(shù)據(jù)模型

computed

Type: Object

計算屬性，每一個元素對應(yīng)一個函數(shù)

注：

* computed屬性依賴于data中的響應(yīng)式數(shù)據(jù)
* computed屬性可依賴computed屬性
* computed禁止賦值操作

methods

Type: Object
每一個元素對應(yīng)一個函數(shù)，支持響應(yīng)式替換

watch

Type: Object

監(jiān)測對象，監(jiān)測對應(yīng)的響應(yīng)式數(shù)據(jù)，當數(shù)據(jù)發(fā)生更改時執(zhí)行回調(diào).

$watch

Type: Function
監(jiān)測某一數(shù)據(jù)的響應(yīng)式變化

如：

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

生命周期函數(shù)，編譯前執(zhí)行

ready

生命周期函數(shù)，渲染完畢后執(zhí)行

Install 
npm install tiny-vue --save

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80956.html

相關(guān)文章

  • 從 VantComponent 談 小程序維護

    摘要：不多廢話，先說結(jié)論小程序組件寫法這里就不再介紹。在官方文檔中，我們可以看到使用構(gòu)造器構(gòu)造頁面事實上，小程序的頁面也可以視為自定義組件。經(jīng)過一番測試，得出結(jié)果為為了簡便。畢竟官方標準，不用擔心其他一系列后續(xù)問題。 在開發(fā)小程序的時候，我們總是期望用以往的技術(shù)規(guī)范和語法特點來書寫當前的小程序，所以才會有各色的小程序框架，例如 mpvue、taro 等這些編譯型框架。當然這些框架本身對于新開...

    worldligang 評論0 收藏0

  • vue學(xué)習(xí)筆記（二）

    摘要：供用戶在相應(yīng)的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應(yīng)的階段對其進行操作。 beforeCreate(){ //組件實例剛...

    klivitamJ 評論0 收藏0

  • vue學(xué)習(xí)筆記（二）

    摘要：供用戶在相應(yīng)的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應(yīng)的階段對其進行操作。 beforeCreate(){ //組件實例剛...

    Pines_Cheng 評論0 收藏0

  • vue學(xué)習(xí)筆記（二）

    摘要：供用戶在相應(yīng)的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應(yīng)的階段對其進行操作。 beforeCreate(){ //組件實例剛...

    ideaa 評論0 收藏0

  • vue響應(yīng)式原理

    摘要：響應(yīng)式原理判斷該實例是否存在進行調(diào)用相應(yīng)的初始化函數(shù)與主要工作是調(diào)用給屬性分別掛載觸發(fā)該鉤子時，會將當前屬性的實例推入當前的也就是當前的中即它訂閱的依賴，下文會講到。 vue響應(yīng)式原理 initState new Vue() => _init() => initState: function initState (vm: Component) { vm._watchers = []...

    CoderBear 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<