bemtvjs 다운로드 bemtvjs 소스 코드 다운로드

bemtvjs

타사 구성 요소

v0.9.0 - No “props” | Breaking Changes

다운로드

BEMTV 로고

BEMTV를 가지고 놀기 전에 두 번 생각하고 너무 많이 즐기면 놀라지 마십시오!

번역 :

포르투갈은 브라질을합니다

왜 BEMTV?

현재 JavaScript Ecosystem에는 사용자 인터페이스 개발을위한 훌륭한 도구가 있습니다. BEMTV는 이러한 도구가 가져오고 가져 오는 것의 많은 부분을 재사용하지만 사본이 아니며 완전히 새로운 것입니다.

주요 기능

다른 UI 라이브러리 및 프레임 워크보다 깨끗한 구문.
"소품"이 없습니다. 부모 구성 요소가 데이터를 자식 구성 요소로 전달하는 새로운 방법.
공통 라우팅 시스템 대신 또는 파일을 기반으로하는 BEMTV는 응용 프로그램에서의 사용에 따라 구성 요소를 자동으로 경로로 "변환"할 수있는 새로운 혁신적인 라우팅 시스템을 제공합니다.
구성 요소 템플릿에서 DOM 이벤트와 관련된 논리 분리.
반자동 코드 분할.
CSS-in-JS 및 CSS-in-template.
구성 요소의 설계를 통해 그에 속하는 모든 방법을 내보내므로 응용 프로그램의 어느 부분에서도 이러한 방법을 사용할 수 있습니다.
구성 요소 변수와 HTML 요소 특성 및 속성 사이의 쉬운 양방향 바인딩.
후크.
변환 기능은 템플릿의 배열, 세트, 맵 및 객체와 같은 데이터 구조를 분리하는 기능입니다.
Brackethtml Markup 언어 : <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 ]` ;