728x90 PROGRAMMING/Vue7 [Vue] Template Syntax Template Syntax 렌더링된 DOM를 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문 사용 Interploation (보간법) - Text 메시지: {{ message }} - Raw HTML - Attributes - JS 표현식 {{ number + 1 }} {{ message.split('').reverse().join('') }} Directive (디렉티브) v- 접두사가 있는 특수 속성 속성 값은 단일 JS 표현식이 됨 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할 전달인자 (Arguments) : ':' (콜론)을 통해 전달인자 받을 수 있음 수식어 (Modifiers) : '.' (점)으로 표시되는 특수 접미사, directive.. 2021. 11. 15. [Vue] MVVM Pattern, Vue 인스턴스 생성 MVVM Pattern 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴 - Model JavaScript의 Object 자료 구조 ( { key: value } ) Object는 Vue Instance 내부에서 데이터로 사용 데이터가 바뀌면 View(DOM)가 반응 - View DOM(HTML) 데이터의 변화에 따라 바뀌는 대상 - View Model 모든 Vue Instance View와 Model 사이에서 데이터와 DOM에 관련된 모든 일 처리 ViewModel을 활용해 Data를 얼만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것 Vue 인스턴스 생성 Vue.js 코드 작성 순서 : 데이터가 변화하면 DOM이 변경 → 1. 데이터 로직 작성 2. DOM 작성 CDN 작성 {{ .. 2021. 11. 15. [Vue] SPA(Single Page Application), CSR(Client Side Rendering) Vue.js 프론트엔드 프레임워크 사용자 인터페이스를 만들기 위한 진보적인 자바스크립트 프레임워크 SPA (Single Page Application) 지원 왜 Vue.js일까? Vanilla JS는 페이지에서 수정되는 사항이 있으면, 수정되는 '모든 요소'를 선택해서 '이벤트'를 등록하고 변경 Vue.js는 DOM과 Data가 연결되어 있으면 Data를 수정할 경우 DOM이 알아서 변경 SPA (Single Page Application) 단일 페이지 애플리케이션 현재 페이지를 동적으로 렌더링함으로써 사용자와 소통하는 웹 애플리케이션 단일 페이지로 구성되며 최초에만 페이지를 다운로드하고 이후에는 동적으로 DOM 구성 전체 페이지가 아닌 현재 페이지 중 필요한 부분만 동적으로 다시 작성 연속되는 페이지 .. 2021. 11. 15. 이전 1 2 다음 728x90