본문 바로가기

Frontend/Vue.js9

뷰 라우터 다루기 1 보호되어 있는 글 입니다. 2025. 5. 13.
[Vue.js]뷰로 투두리스트 앱 만들기 1 뷰를 연습하기 위해서 간단한 할일 목록 앱을 만들어 보겠다. 1. 화면을 그리기 위해서 div로 나누는 작업을 먼저한다. 펜과 종이로 먼저 나눴다. 이제 코드로 나눈다 할일이 있을 경우, 없을 경우를 분리해서 div를 만든다. 결과물은 : 이렇게 템플릿을 작성하였는데, 클래스이름이 구조적이지 못한것같아서 좀더 BEM 방식에 맞게 변경하였다. BEM 은 Block, Element, Modifier의 약자로, CSS 클래스이름을 구조적으로 짓기 위한 방법이다. Block은 독립적인 ui구성 요소로, card, form, button 같은 것이다. Element 는 블록안의 구성 요소로, 블록과 연결되어 독립적으로 쓰이지 않는다. card__title, form__input 같이 쓸 수 있다. .. 2025. 5. 9.
[Vue.js] $emit은 무엇이고 어떻게 사용하는가? $emit 이란?$emit은 자식 컴포넌트가 부모 컴포넌트에게 데이터를 전달할때 사용하는 메소드이다.부모 -> 자식으로 데이터 전달 할때는 props를 사용하지만, 그 반대인경우는 $emit을 사용한다.사용 방법은?우선, 자식이 부모에게 알려야 할일이 있는지 생각해본다.버튼을 클릭했다거나, 값을 입력 완료했다거나, 선택을 완료 했다거나.자식에서 이벤트를 정의하고 $emit 을 사용해 보낸다.이벤트 이름 , 예를 들어 send-message 라는 이벤트를 정한다.필요하다면, 데이터를 같이 보낸다. 여기서는 'hello from child'라는 메시지를 같이 보낸다.부모 컴포넌트에서 자식을 사용할 때 이벤트를 listen 하도록 한다.인라인 핸들러로 처리하거나 메소드를 만들어 처리한다.예제에서는 메소드를 만.. 2025. 5. 9.

티스토리툴바