Vdt.js前端虛擬DOM模板引擎

vdt.js 是一個在瀏覽器中使用的前端模板引擎，基于virtual-dom庫開發(fā)，采用虛擬dom的思想實現(xiàn)模板的渲染與更新。

相對于傳統(tǒng)前端模板引擎而言，優(yōu)勢在于：模板更新便捷而高效。因為利用virtual dom技術(shù)，vdt模板渲染的結(jié)果并非傳統(tǒng)的html字符串，而是dom，所以更新操作不會導(dǎo)致整個模板重繪。

目前該工具已在金山云項目中大量應(yīng)用

更多信息，請參考：http://javey.github.io/vdt.html，期待大家關(guān)于文檔和代碼的pull request。

功能特性

• 基于virtual-dom，DOM更新速度快

• 能實現(xiàn)前后端模板繼承，包含，宏定義等

• 文件大小在gzip壓縮后大概13KB（包含瀏覽器實時編譯模塊）

• 支持前后端渲染

安裝

通過script標(biāo)簽引入

Vdt會暴露全局變量Vdt，請到github下載對應(yīng)的文件， 或者通過npm安裝，然后script標(biāo)簽引入

npm install vdt --save

<script type="text/javascript" src="node_modules/vdt/dist/vdt.js"></script>

與webpack或browserify結(jié)合使用

使用npm方式安裝依賴

npm install vdt --save

var Vdt = require('vdt');

與requireJs等模塊加載器結(jié)合使用

Vdt打包的文件支持通過UMD方式加載

define(['path/to/vdt'], function(Vdt) { });

示例

<div>
    <h1>{title}</h1>
    <div ev-click={onClick.bind(self)}>Clicked: {count}</div>
    <ul v-for={items}>
        <li>{key}: {value}</li>
    </ul>
</div>

var vdt = Vdt(template);
vdt.render({
    title: 'vdt',
    items: {
        a: 1,
        b: 2
    },
    count: 0,

    onClick: function() {
        this.count++;
        vdt.update();
    }
});