Vdt.js前端虚拟DOM模板引擎

vdt.js 是一个在浏览器中使用的前端模板引擎，基于virtual-dom库开发，采用虚拟dom的思想实现模板的渲染与更新。

相对于传统前端模板引擎而言，优势在于：模板更新便捷而高效。因为利用virtual dom技术，vdt模板渲染的结果并非传统的html字符串，而是dom，所以更新操作不会导致整个模板重绘。

目前该工具已在金山云项目中大量应用

更多信息，请参考：http://javey.github.io/vdt.html，期待大家关于文档和代码的pull request。

功能特性

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




• 能实现前后端模板继承，包含，宏定义等




• 文件大小在gzip压缩后大概13KB（包含浏览器实时编译模块）




• 支持前后端渲染

安装

通过script标签引入

Vdt会暴露全局变量Vdt，请到github下载对应的文件， 或者通过npm安装，然后script标签引入

npm install vdt --save

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

与webpack或browserify结合使用

使用npm方式安装依赖

npm install vdt --save

var Vdt = require('vdt');

与requireJs等模块加载器结合使用

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();

    }

});