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