[javascript] VUE.js - https://kr.vuejs.org

[javascript] VUE.js - https://kr.vuejs.org

GitHub : https://github.com/vuejs/vue

A progressive, incrementally-adoptable JavaScript framework for building UI on the web. http://vuejs.org

Vue.js가 무엇인가요?

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.

Vue.js를 시험해 볼 수 있는 가장 쉬운 방법은 JSFiddle Hello World 예제를 사용하는 것입니다. 다른 탭에서 자유롭게 열어 본 후 몇 가지 기본 예제를 따라가십시오. 또는 단순히 index.html 파일을 만들고 Vue를 다음과 같이 포함할 수 있습니다.

반응형에 대해 깊이 알아보기

우리는 대부분의 기본적인 내용을 다루었습니다. 이제 깊이 알아 볼 때 입니다! Vue의 가장 두드러진 특징 중 하나는 눈을 어지럽히지 않는 반응형 시스템 입니다. 모델은 단순한 JavaScript 객체 입니다. 수정하면 뷰가 갱신됩니다. 이것은 상태 관리를 매우 간단하고 직관적으로 만듭니다. 이를 이해하는 것은 매우 중요합니다. 이 섹션에서는 Vue의 반응 시스템에 대한 하위 수준의 세부 정보를 살펴 보겠습니다.

<

변경 내용을 추적하는 방법  https://kr.vuejs.org/v2/guide/reactivity.html

일반 JavaScript 객체를 data 옵션으로 Vue 인스턴스에 전달하면 Object.defineProperty를 이용해 Vue는 모든 속성을 거쳐 getter / setter 변환합니다. 이것은 ES5 전용이며 하위 버전에 없는 기능이기 때문에 Vue가 IE8 이하를 지원하지 않습니다.

getter / setter 는 사용자에게는 보이지 않으나 속성에 액세스 하거나 수정할 때 Vue가 종속성 추적 및 변경 알림을 수행할 수 있습니다. 한가지 주의 사항은 변환된 데이터 객체가 기록될 때 브라우저가 getter / setter 형식을 다르게 처리하므로 친숙한 인터페이스를 사용하기 위해vue-devtools를 설치하는 것이 좋습니다.

모든 컴포넌트 인스턴스에는 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 “수정”된 모든 속성을 기록합니다. 나중에 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링 됩니다.

...