VDOM

为什么使用VDOM

• 编写 声明式 Pythonic布局。
• 使用用户友好的声明式语句创建标题、正文、图像等更常见的用户界面元素。
• 在 Jupyter 前端（如 nteract 和 JupyterLab）中渲染布局。
• 序列化布局以进行重新激活并在您的Web应用程序中稍后使用。

看看VDOM的威力

通过编写和运行Python代码来创建布局。下面看一个示例，创建并显示标题、样式化正文和GIF。

from IPython.display import display
from vdom.helpers import h1, p, img, div, b

display(
    div(
        h1('Our Incredibly Declarative Example'),
        p('Can you believe we wrote this ', b('in Python'), '?'),
        img(src="https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif"),
        p('What will ', b('you'), ' create next?'),
    )
)

哇！

您的示例创建了一个布局并显示在下面

现在极其声明式

您能相信这是用 Python 编写的吗？

接下来 您 会创建什么？

入门

安装Python包

pip install vdom

用法

首先，导入 vdom.helpers 用于标题、文本和图像

from vdom.helpers import h1, p, img, div, b

使用Python代码中的VDOM助手创建布局。下面是一个示例代码布局块

my_pretty_layout = div(
    h1('Our Incredibly Declarative Example'),
    p('Can you believe we wrote this ', b('in Python'), '?'),
    img(src="https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif"),
    p('What will ', b('you'), ' create next?'),
)

要显示布局，请使用IPython的display方法

from IPython.display import display


display(my_pretty_layout)

包括渲染输出的完整示例，请见 上面。

文档

• 设计模式
• 规范 - VDOM媒体类型
• 规范 - VDOM事件支持

为VDOM做出贡献

从源代码安装开发者版本

git clone https://github.com/nteract/vdom
cd vdom
pip install -e .

贡献指南和发布

我们遵循以下贡献指南。

对于帮助创建发布的贡献者，[RELEASING.md]文档概述了流程。

了解关于nteract的更多信息

查看nteract网站以了解我们正在开发的其他项目。