Vue의 키 컨셉

템플릿

 

• DOM을 구축하는 방법으로 템플릿을 주로 사용함
• HTML을 기반으로 하는 템플릿 구문을 사용하여 텍스트 에디터와 함께 쉽게 사용 가능
• 엔지니어와 디자이너가 공동 작업하기 쉬움
• 템플릿과 로직을 연결할 때 템플릿 내부에 독자적인 속성으로 '디렉티브' 기능 사용

 

 

 

데이터 바인딩

 

• 데이터 바인딩: 데이터와 랜더링을 동기화하는 구조
• 프레임워크는 자바스크립트 데이터와 이를 사용하는 위치를 연결해서 데이터 변경이 있을 때 자동으로 DOM을 업데이트 함
• 라이브러리 없이 자바스크립트로만 특정 요소의 텍스트를 변경하고 싶은 경우에 UI가 복잡해지면 코드도 굉장히 많아지고 정확도 떨어짐

 

 

 

v-로 시작하는 디렉티브

 

• v- 로 시작하는 속성을 디렉티브라고 부름
• 주로 데이터 바인딩과 관련된 처리를 함
• 디렉티브의 값은(v-로 시작하면) 자바스크립트 표현식임
• v-로 시작하지 않으면 값은 모두 문자열임
• 디렉티브는 옵션으로 매개변수 또는 장식자를 붙일 수 있음

 

v-bind     :value     .sync   =  "message"

디렉티브  매개변수   장식자       값(자바스크립트 식)

 

<!-- key 속성에 id라는 값을 지정 -->
<!-- 단순히 'id'라는 문자열을 지정하는 것임 -->

<div key="id"></div>



<!-- v-로 시작하는 디렉티브이므로 값은 'id'라는 자바스크립트 변수를 나타냄 -->
<!-- 즉, 애플리케이션에 등록되어 있는 데이터 전용 객체의 id라는 속성을 나타냄 -->
<div v-bind:key="id"></div>

 

 

 

컴포넌트 지향 화면 구축

 

 

컴포넌트

 

• 기능별로 자바스크립트와 템플릿을 하나의 세트로 묶어서, 다른 기능과 분리하여 개발할 수 있도록 해 주는 기능
• HTML과 자바스크립트를 세트로 만들어 주는 것
• 단일 파일 컴포넌트를 사용할 수 있는 환경에서는 HTML과 자바스크립트 이외에도 CSS까지 세트로 만들 수 있음
• 컴포넌트로 만들면 관련 있는 소스 코드들을 쉽게 확인할 수 있음 -> 페이지를 구조화 할 수 있음
• 로직과 관계없이 단순하게 HTML코딩의 효율화를 위해 컴포넌트를 만드는 경우도 있음
• 컴포넌트가 복잡하게 구조화되었을 경우 Vuex와 Vue Router로 확장할 수 있음

 

 

참고: 고양이도 할 수 있는 Vue.js