본문 바로가기

Vue

(3)
Vue 인스턴스(2.x) Vue 인스턴스 만들기 모든 Vue 앱은 Vue 함수로 새Vue 인스턴스를 만드는 것 부터 시작합니다. var vm = new Vue({ // 옵션 }) 엄격히 MVVM패턴과 관련이 없지만 Vue의 디자인은 부분적으로 그것에 영감을 받았습니다. 관례적으로 Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용합니다. Vue 인스턴스를 생성할 때는 options 객체를 전달해야 합니다. 이 가이드는 대부분 원하는 생성을 구현할 때 이런 옵션들을 사용하여 원하는 동작을 구현하는 방법에 대해 다룹니다. 전체 옵션 목록은 API reference에서 확인할 수 있습니다. Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한..
템플릿 문법(2.x) 템플릿 문법 Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문을 분석할 수 있는 유효한 HTML입니다. ※렌더링: HTML로 입력받아 해석하고 화면에 표시해주는 것. Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것입니다. 내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일 합니다. 반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있습니다. 가상 DOM 개념에 익숙하고 JavaScript의 기..
반응형에 대해 깊이 알아보기 (Vue.js 2.x) 이제 조금 더 깊게 알아볼 차례입니다. Vue의 가장 두드러진 특징 중 하나는 눈에 잘 띄지 않는 반응형 시스템입니다. 모델은 단순한 JavaScript 객체입니다. 수정함녀 화면이 갱신됩니다. 스테이트 관리를 간단하고 직관적으로 만들어주지만, 몇 가지 흔한 함점을 피하려면 어떻게 작도하는지 이해하는 것도 중요합니다. 이 섹션에는 Vue의 반응형 시스템의 세부사항을 다룹니다. 변경 내용을 추척하는 방법 Vue 인스턴스에 JavaScript 객체를 data 옵션으로 전달하면 Vue는 모든 속성에 Object.definProperty를 사용하여 getter/setters로 변환합니다. 이는 Vue가 ES5를 사용할 수 없는 IE8를 지원하지 않는 이유입니다. getter / setter 는 사용자에게 보이지..