Vue JS (3) 썸네일형 리스트형 Vue template 문법 Template Syntax 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용 Interpolation Directive Interpolation (보간법) Text 메시지: {{ msg }} RawHTML Attributes JS표현식 {{ number + 1 }} {{ message.split('').reverse().join('') }} Directive (디렉티브) v-접두사가 있는 특수 속성 속성 값은 단일 JS 표현식이 됨 (v-for는 예외) 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할을 함 전달인자 (Arguments) ... ... :(콜론)을 통해 전달인자를 받을 수도 있음 수식어 (Modifiers) .... Vue 기본 문법 Basic syntax of Vue.js Vue instance 실제로 쓸수 있는 존재 - 설계도를 바탕으로 실제로 쓸 수 있는 존재를 만든다고 생각 모든 Vue 앱은 Vue 함수로 새 인스턴스를 만드는 것 부터 시작 Vue 인스턴스를 생성할 대는 Options 객체를 전달해야 함 여러 Options들을 사용하여 원하는 동작을 구현 Vue Instance === Vue Component const app = new Vue({ }) Options/DOM 'el' Vue 인스턴스에 연결(마운트) 할 기존 DOM 엘리먼트가 필요 CSS 선택자 문자열 혹은 HTMLElement로 작성 new를 이용한 인스턴스 생성때만 사용 const app = new Vue({ el: '#app' }) 'data' Vue 인스.. Vue js intro What is Vue.js 사용자 인터페이스를 만들기 위한 프로그레시브 프레임 워크 현대적인 tool과 다양한 라이브러리를 통해 SPA(Single Page Aplication)를 완벽하게 지원 Front-End Development 프론트엔드 개발은 HTML, CSS 그리고 JavaScript를 활용해서 데이터를 볼 수 있게 만들어 줌 이 작업을 통해 사용자는 데이터를 눈으로 볼 수 있고 데이터와 상호 작용 할 수 있음 대표적인 프론트엔드 프래임 워크 Vue.js, React, Angular SPA 단일 페이지 애플리케이션 현재 페이지를 동적으로 작성함으로써 사용자와 소통한느 웹 어플리케이션 단일 페이지로 구성되며 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM을 구성 즉, 처음 페이지를.. 이전 1 다음
