Template Syntax Vue 2 guide > template syntax 참고 렌더링 된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩할 수 있는 HTML 기반 template syntax를 사용 렌더링 된 DOM - 브라우저에 의해 보기 좋게 그려질 HTML 코드 HTML 기반 template syntax - HTML 코드에 직접 작성할 수 있는 문법 제공 선언적으로 바인딩 - Vue instance와 DOM을 연결 Template Interpolation 가장 기본적인 바인딩(연결) 방법 중괄호 2개로 표기 DTL과 동일한 형태로 작성 Template interpolation 방법은 HTML을 일반 텍스트로 표현 RAW HTML v-html directive을 사용하여 ..

목차 MVVM Pattern Instance el data 1. MVVM Pattern 소프트웨어 아키텍처 패턴의 일종 마크업 언어로 구현하는 그래픽 사용자 인터페이스(view)의 개발을 Back-end(model)로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함 View = 우리 눈에 보이는 부분 = DOM Model = 실제 데이터 = JSON View Model (Vue) View를 위한 Model View와 연결(binding)되어 Action을 주고 받음 Model이 변경되면 View Modle도 변경되고 바인딩된 View도 변경됨 View에서 사용자가 데이터를 변경하면 View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨 정리 View는 Model을 몰..

목차 사전 준비 Front-end Development Why Vue Vue 2 vs Vue 3 1. 사전 준비 1. VSCode Vetur extension 설치 문법 하이라이팅, 자동완성, 디버깅 기능 제공 2. Chrome Vue devtools extension 설치 및 설정 크롬 브라우저 개발자 도구에서 vue 디버깅 기능 제공 extension 설치 후 확장 프로그램 관리 - 파일 URL에 대한 액세스 허용 2. Front-end Development Back-end 개발은 Django로 진행, 따라서 앞으로 Javascript를 활용한 Front-end 개발에는 Vue.js로 진행한다. Vue.js === JavaScript Front-end Framework Front-end Framewo..