Vue.js] 2. Vue 앱 만들기, 템플릿 문법

앱 인스턴스

 

모든 Vue앱은 createApp  함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작한다. 

createApp에 전달하는 객체는 컴포넌트이며, 모든 앱에는 다른 컴포넌트를 자식으로 포함할 수 있는 최상위 컴포넌트가 필요하다. 

 

App : 최상위 컴포넌트

앱 인스턴스는 .mount()메서드가 호출될 때까지 아무것도 렌더링하지 않는다. 

 

템플릿 문법

Vue는 컴포넌트 인스턴스의 데이터를 렌더링된 DOM에 바인딩할 수 있는 HTML기반 템플릿 문법을 사용한다. 

내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일합니다. 반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 다시 렌더링할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 합니다. 

 

텍스트 보간법

데이터 바인딩의 가장 기본적인 형태는 {{ }} 을 사용한 덱스트 보간법이다. 

<span>메세지: {{ msg }}</span>

{{ }} 내 msg는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체된다. 또한 msg 속성이 변경될 때마다 업데이트된다. 

 

속성 바인딩

{{ }} 는 HTML attribute내에서 사용할 수 없다. 대신 v-bind 디렉티브를 사용할 수 있다. 

<div v-bind:id="dynamicId"></div>

dynamicId 값이 null 또는 undefined이면 element의 속성이 제거된 상태로 렌더링된다. 

 

<div :id="dynamicId"></div>

v-bind는 매우 일반적으로 사용되어 단축 문법이 있다. 

<!-- :id="id" 와 동일 -->
<div :id></div>

<!-- 이것도 작동합니다 -->
<div v-bind:id></div>

 

여러 속성을 동적으로 바인딩

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}
<div v-bind="objectOfAttrs"></div>

JavaScript 표현식 사용

데이터 바인딩 내에서 JavScript 표현식의 모든 기능을 지원한다. 

{{ number + 1 }}

{{ ok ? '예' : '아니오' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

 

하나의 표현식만 가능

즉, return 뒤에 사용할 수 있는 코드여야 한다. 

다음 코드들은 작동하지 않는다. 

<!-- 이것은 표현식이 아니라 선언식입니다: -->
{{ var a = 1 }}

<!-- 흐름 제어도 작동하지 않습니다. 삼항 표현식을 사용하십시오. -->
{{ if (ok) { return message } }}

 

함수 호출

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>