반응형

2024/01/28 5

19. Single File Component (SFC) | 언어블록 | CSS 기능

Vue에서 Single-File Component(SFC, *.vue)는 Vue 컴포넌트의 템플릿(template), 로직(script), 스타일(style)을 하나의 파일로 캡슐화 하는 특수 파일 형식 입니다. 확장자는 *.vue이며 다음은 SFC의 예 입니다. 위 예시처럼 Vue SFC는 HTML, CSS, JavaScript의 문법을 유지하면서 확장한 특수 파일 입니다. 언어 블록 각 *.vue 파일은 한번에 최대 하나의 top-level 블록을 포함할 수 있습니다. 콘텐츠는 추출되어 @vue/compiler-dom으로 전달되고, javaScript 렌더 기능으로 사전 컴파일되고, render 옵션으로 내보내어 컴포넌트에 첨부됩니다. 각 *.vue 파일은 한 번에 최대 하나의 블록을 포함할 수 있습..

17. 컴포넌트 기초 (컴포넌트 정의, 등록, 사용) | 네이밍 규칙 파스칼케이스

컴포넌트 UI(HTML, CSS, JS) 를 재사용 할 수 있도록 정의한것이 컴포넌트다. 컴포넌트 정의 컴포넌트를 정의하는 방법은 Single-File Conponent (SFC)를 사용하는 방법과 문자열 템플릿 (Spring template)으로 정의하는 방법이 있습니다. Single-File Conponent (SFC) -> 실무에서 일반적으로 사용하는 방법 문자열 템플릿 (Spring template) Single-File Component(SFC) 빌드 도구를 사용할 때 컴포넌트는 일반적으로 Single-File Component(SFC)로 정의할 수 있습니다. Single-File Component(SFC)는 확장자 *.vue를 가진 단일 파일입니다. 문자열 템플릿 빌드 도구를 사용하지 않을 때..

15. Watch, WatchEffect

Watch 우리는 종종 반응형 상태가 변경 되었을때 감지하여 다른 작업(api 호출 등)을 수행해야 하는 경우가 있습니다. 예를 들어 어떤 상태가 변경 되었을때 DOM을 변경하거나 비동기 작업을해서 다른 상태를 변경하는 것입니다. Compositon API의 watch 함수를 사용하여 반응형 상태가 변경 될 때마다 특정 작업을 수행할 수 있습니다. watch의 첫번째 인자는 감지할 데이터, 두번째 인자는 콜백 함수 () =>{} 콜백 함수의 매개변수로는 (변경된 새로운값, 이전 값) watch (감지 데이터, (새 값, 이전 값) => { }); watch의 첫번째 매개변수로 getter 함수를 넣어 줄 수있다. watch의 매개변수로 array를 넘길 수 도 있다. 결과도 array로 받는다. obje..

반응형