또 다른 시간:
첫 번째 웹 구성요소 작성(Modulo.js 학습 - 파트 f
2024-11-08에 게시됨
검색:322
? 신규 구독자와 복귀 컴포넌트 코더 여러분, 환영합니다! 새로운 10부작 튜토리얼 시리즈를 시작하겠습니다. 다른 튜토리얼에서는 Modulo.js를 사용하여 포켓몬 댄스 파티, 복고풍 압출 텍스트 편집기 또는 비디오 게임 갤러리와 같은 구체적이고 재미있는 작은 앱을 구축했지만, 이 튜토리얼 시리즈는 기본 원칙을 바탕으로 원점부터 시작합니다. 웹 구성 요소입니까?
HTML과 CSS 이후의 다음 단계방금 HTML과 CSS의 기본 사항을 배웠으며 다음 단계로 나아가는 데 대해 궁금하고 더 크고 완전한 웹 애플리케이션을 구축하고 싶습니까? 아니면 이미 웹 개발자이거나 JavaScript 전문가이고 너무 많은 부풀림, 도구 또는 과도한 종속성 없이 빠르고 가벼운 웹 앱을 구축하고 싶습니까?
그렇다면 웹 구성 요소가 당신을 위한 것입니다! 이를 통해 재사용 가능한 코드 부분을 만들 수 있습니다. 이 튜토리얼을 통해 반복적이고 유지 관리가 어려운 HTML 및 CSS를 수정하는 방법을 배우게 됩니다. 또한 최소한의 도구와 라이브러리만 사용하므로 Node.js, NPM 또는 대규모 node_modules가 필요하지 않습니다. 또한 최신 프런트엔드 웹 개발 기술을 연마할 수 있습니다. 이 시리즈의 향후 튜토리얼에서는
슬롯, shadowDOM, props와 같은 개념을 배우게 됩니다. , 템플릿 작성, 상태 관리 등! 이는 다른 널리 사용되는 프레임워크를 사용하기 위해 이전할 수 있는 개념이며, Modulo의 간단하고 선언적인 접근 방식은 복잡한 설정에 얽매이지 않고 핵심 개념을 배울 수 있는 더 매력적인 방법이 될 수 있습니다.
모듈로 프레임워크 소개Modulo란 무엇입니까? Modulo는 JavaScript로 작성된 작지만 강력한 무료 소프트웨어/오픈 소스 웹 프레임워크입니다. 종속성이 없으며 HTML 구문을 사용하므로 Node.js나 컴파일이 필요 없이 페이지 로드 시 자체적으로 설정할 수 있습니다. 일반 HTML "정적 사이트"(예: HTML, CSS 및 기타 정적 자산을 디렉토리에 모아 정적 웹 호스트에서 실행하는 경우) 또는 기타 기존 웹 앱에서 사용할 수 있습니다. 이 튜토리얼은 웹 컴포넌트를 구축하기 위한 도구로 Modulo를 사용하는 것에 관한 것입니다.
1부 소개
기본 HTML 및 Modulo로 웹 구성요소를 생성하고 재사용하여 CSS를 구현합니다.
1단계: 모듈로 포함Modulo를 사용하기 전에 프레임워크를 포함해야 합니다. 전체 프레임워크는 2000줄의 JavaScript가 포함된 파일인 "Modulo.js"에 포함되어 있습니다.
이는 Modulo 프로젝트를 시작하려면 브라우저와 편집기 외에 말 그대로 종속성이 필요하지 않음을 의미합니다. 따라서 빈 HTML 파일을 열고 다음과 같은 매우 간단한 시작 코드를 사용하여 시작하세요.
2단계: 첫 번째 구성 요소 정의
이제 포함되었으므로
모듈로 정의 작성을 시작하고 일반적으로 프레임워크를 사용할 수 있습니다. Modulo
이 "템플릿"은 구성 요소의 "템플릿"이 됩니다. 구성 요소가 페이지에 나타날 때마다 페이지 내부에 지정된 템플릿이 렌더링됩니다.3단계: 첫 번째 구성 요소 사용
정의한 후에는 일반 HTML 태그인 것처럼 이름을 참조하여 구성 요소를 사용할 수 있습니다.
이렇게 하면 화면에 다음이 표시됩니다.
안녕하세요한 번 등록되면 구성 요소는 일반 HTML 태그가 갈 수 있는 곳이면 어디든 갈 수 있으며 CSS를 사용하여 동일한 방식으로 스타일을 지정할 수도 있습니다. 즉, 구성 요소를 만드는 것은모듈로 세계!
릴리스 선언문
이 기사는 https://dev.to/michaelpb/writing-your-first-web-comComponent-learn-modulojs-part-1-of-10-4okh?1에서 복제됩니다. 침해가 있는 경우에는 Study_golang에 문의하세요. @163.com 삭제
최신 튜토리얼
더>
-
Spring Security 4.1 이상에서 CORS 문제를 해결하기위한 안내서Spring Security 4.1 이후 Cors 지원을 활성화하기위한보다 간단한 접근 방식이 있습니다. webmvcconfigureradapter { @override public void addcorsmappings (corsregistry Registry) {...프로그램 작성 2025-04-24에 게시되었습니다 -
regex를 사용하여 PHP에서 괄호 안에서 텍스트를 추출하는 방법$ fullstring = "이 (텍스트)을 제외한 모든 것을 무시하는 것"; $ start = strpos ( ', $ fullstring); $ fullString); $ shortstring = substr ($ fulls...프로그램 작성 2025-04-24에 게시되었습니다
-
오른쪽 테이블의 where 조항에서 필터링 할 때 왼쪽 결합이 연결된 이유는 무엇입니까?다음 쿼리를 상상해보십시오 : select A.Foo, B. 바, c.foobar a로 테이블온에서 내부는 a.pk = b.fk에서 b로 tabletwo를 결합합니다 b.pk = c.fk에서 c as c로 왼쪽으로 결합하십시오 여기서 a.foo = '...프로그램 작성 2025-04-24에 게시되었습니다
-
입력 : "경고 : mysqli_query ()는 왜 매개 변수 1이 mysqli, 주어진 리소스"오류가 발생하고이를 수정하는 방법을 기대 하는가? 출력 : 오류를 해결하는 분석 및 수정 방법 "경고 : MySQLI_QUERY () 매개 변수는 리소스 대신 MySQLI 여야합니다."mysqli_query () mysqli_query ()는 매개 변수 1이 mysqli, 리소스가 주어진 리소스, mysqli_query () 함수를 사용하여 mysql query를 실행하려고 시도 할 때 "경고 : mysqli_query (...프로그램 작성 2025-04-24에 게시되었습니다
-
동적 인 크기의 부모 요소 내에서 요소의 스크롤 범위를 제한하는 방법은 무엇입니까?문제 : 고정 된 사이드 바로 조정을 유지하면서 사용자의 수직 스크롤과 함께 이동하는 스크롤 가능한 맵 디브가있는 레이아웃을 고려합니다. 그러나 맵의 스크롤은 뷰포트의 높이를 초과하여 사용자가 페이지 바닥 글에 액세스하는 것을 방지합니다. ...프로그램 작성 2025-04-24에 게시되었습니다
-
MySQLI로 전환 한 후 Codeigniter가 MySQL 데이터베이스에 연결 해야하는 이유문제를 디버깅하려면 파일 끝에 다음 코드를 추가하고 출력을 검토하는 것이 좋습니다. echo ''; print_r ($ db ); echo ''; echo '데이터베이스에 연결 :'. $ db ; $ dbh = mysq...프로그램 작성 2025-04-24에 게시되었습니다
-
Java는 여러 반환 유형을 허용합니까 : 일반적인 방법을 자세히 살펴보십시오.public 목록 getResult (문자열 s); 여기서 foo는 사용자 정의 클래스입니다. 이 방법 선언은 두 가지 반환 유형을 자랑하는 것처럼 보입니다. 목록과 E. 그러나 이것이 사실인가? 일반 방법 : 미스터리 메소드는 단일...프로그램 작성 2025-04-24에 게시되었습니다
-
Point-In-Polygon 감지에 더 효율적인 방법 : Ray Tracing 또는 Matplotlib \ 's Path.contains_points?Ray Tracing MethodThe ray tracing method intersects a horizontal ray from the point under examination with the polygon's sides. 교차로의 수를 계산하고 지점이 패...프로그램 작성 2025-04-24에 게시되었습니다
-
SQLALCHEMY 필터 조항에서 'Flake8'플래킹 부울 비교가 된 이유는 무엇입니까?데이터베이스 테이블의 부울 필드 (Obsoleted)는 비 초소형 테스트 사례의 수를 결정하는 데 사용됩니다. 이 코드는 필터 절에서 테스트 케이스를 사용합니다. casenum = session.query (testcase) .filter (testcas...프로그램 작성 2025-04-24에 게시되었습니다
-
\ "(1) 대 (;;) : 컴파일러 최적화는 성능 차이를 제거합니까? \"대답 : 대부분의 최신 컴파일러에는 (1)과 (;;). 컴파일러 : s-> 7 8 v-> 4를 풀립니다 -e syntax ok gcc : GCC에서 두 루프는 다음과 같이 동일한 어셈블리 코드로 컴파일합니다. . t_while : ...프로그램 작성 2025-04-24에 게시되었습니다
-
McRypt에서 OpenSSL로 암호화를 마이그레이션하고 OpenSSL을 사용하여 McRypt 암호화 데이터를 해제 할 수 있습니까?질문 : McRypt에서 OpenSSL로 내 암호화 라이브러리를 업그레이드 할 수 있습니까? 그렇다면 어떻게? 대답 : 대답 : 예, McRypt에서 암호화 라이브러리를 OpenSSL로 업그레이드 할 수 있습니다. OpenSSL을 사용하여 McRyp...프로그램 작성 2025-04-24에 게시되었습니다
-
순수한 CS로 여러 끈적 끈적한 요소를 서로 쌓을 수 있습니까?순수한 CSS에서 서로 위에 여러 개의 끈적 끈적 요소가 쌓일 수 있습니까? 원하는 동작을 볼 수 있습니다. 여기 : https://webthemez.com/demo/sticky-multi-header-scroll/index.html Java...프로그램 작성 2025-04-24에 게시되었습니다
-
Homebrew에서 GO를 설정하면 명령 줄 실행 문제가 발생하는 이유는 무엇입니까?발생하는 문제를 해결하려면 다음을 수행하십시오. 1. 필요한 디렉토리 만들기 mkdir $ home/go mkdir -p $ home/go/src/github.com/user 2. 환경 변수 구성프로그램 작성 2025-04-24에 게시되었습니다
-
Firefox Back 버튼을 사용할 때 JavaScript 실행이 중단되는 이유는 무엇입니까?원인 및 솔루션 : 이 동작은 브라우저 캐싱 자바 스크립트 리소스에 의해 발생합니다. 이 문제를 해결하고 후속 페이지 방문에서 스크립트가 실행되도록하기 위해 Firefox 사용자는 Window.onload 이벤트에서 호출되도록 빈 기능을 설정해야합니다. ...프로그램 작성 2025-04-24에 게시되었습니다
-
MySQL에서 데이터를 피벗하여 그룹을 어떻게 사용할 수 있습니까?select d.data_timestamp, sum (data_id = 1 that data_value else 0 End), 'input_1'로 0 End), sum (data_id = 2 an Els.] d.data_timestamp ...프로그램 작성 2025-04-24에 게시되었습니다
중국어 공부
- 1 "걷다"를 중국어로 어떻게 말하나요? 走路 중국어 발음, 走路 중국어 학습
- 2 "비행기를 타다"를 중국어로 어떻게 말하나요? 坐飞机 중국어 발음, 坐飞机 중국어 학습
- 3 "기차를 타다"를 중국어로 어떻게 말하나요? 坐火车 중국어 발음, 坐火车 중국어 학습
- 4 "버스를 타다"를 중국어로 어떻게 말하나요? 坐车 중국어 발음, 坐车 중국어 학습
- 5 운전을 중국어로 어떻게 말하나요? 开车 중국어 발음, 开车 중국어 학습
- 6 수영을 중국어로 뭐라고 하나요? 游泳 중국어 발음, 游泳 중국어 학습
- 7 자전거를 타다 중국어로 뭐라고 하나요? 骑自行车 중국어 발음, 骑自行车 중국어 학습
- 8 중국어로 안녕하세요를 어떻게 말해요? 你好중국어 발음, 你好중국어 학습
- 9 감사합니다를 중국어로 어떻게 말하나요? 谢谢중국어 발음, 谢谢중국어 학습
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
