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 ]` ;