bemtvjs下载bemtvjs源代码下载

bemtvjs

三方组件

v0.9.0 - No “props” | Breaking Changes

下载

BEMTV徽标

在与BEMTV一起玩之前，请三思而后行，如果您享受太多，请不要感到惊讶！

翻译：

Português做巴西

为什么要bemtv？

当前在JavaScript生态系统中，有用于开发用户界面的出色工具。 BEMTV重用这些工具带来的大部分内容，但是它不是副本，这是全新的。

关键功能

比其他UI库和框架清洁语法。
没有“道具”。父母组件将数据传递给儿童组件的一种新方法。
BEMTV不是常见的路由系统或基于文件，而是带来了一个新的创新路由系统，该系统能够根据应用程序在应用程序中的使用自动将组件“转换”到路由。
与组件模板与DOM事件有关的逻辑的分离。
半自动代码分解。
CSS-IN-JS和CSS-IN-TEMPLATE。
组件的设计允许导出所有属于其的方法，该方法允许在应用程序的任何部分中使用这些方法。
组件变量和HTML元素属性和属性之间的易于双向绑定。
钩子。
转换功能将数据结构（例如数组，设置，映射和对象）与模板的标记分开。
brackethtml标记语言：而不是<div>Hey!</div>做到这一点： div[Hey!] 。
通过组件模板声明性句法糖。
这只是JavaScript，不需要JSX或构建时间，只需将其添加到您的index.html中并玩得开心！

告诉我一些代码！

所有组件方法都可以在应用程序的其他部分中导出和使用：

 import { _ } from "bemtv" ;

export const { click$ , onMount , route , css , template } = _ `Home` ( ) ;

这使您可以将组件逻辑分为几个功能，这些功能可以使用组件的生命周期，状态，操纵dom元素，样式，路由，dom事件...

添加CSS和DOM事件：

 import { _ } from "bemtv" ;

export const { click$ , css , template } = _ `Button` ( ) ;

click$ ( ( ) => console . log ( "Clicked!!!" ) ) ;

css `
  color: blue;
` ;

template `button[ I am a button! ]` ;

绑定元素的dom属性与组件：

 import { _ } from "bemtv" ;

const { $ , template } = _ `Input` ( {
  inputValue : 0 ,
} ) ;

template `input[type="number" $inputValue<value]` ;

在进口组件时显示后备：

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `UserData[](Loading...)` ;

创建路由链接：

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `#AboutUs[ Link to about us ]` ;

BEMTV使用创新的自动路线创建系统，这是可能的，因为组件可以像路由/页面一样行为。

计数器组件：

 import { _ } from "bemtv" ;

const { click$ , $ , template } = _ `Counter` ( { count : 0 } ) ;

click$ ( ( ) => $ . count ++ ) ;

template `button[Clicked: $count ]` ;