Basic Syntax-01

Template Syntax

DOM을 기본 구성 요소 인스턴스 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용

• Text Interpolation

<p> Message: {{msg}}</p>

• 데이터 바인딩의 가장 기본적인 형태
• 이중 중괄호 구문(콧수염 구문)을 사용
• 콧수염 구문은 해당 구성 요소 인스턴스의 msg 속성 값으로 대체
• msg 속성이 변경될 때마다 업데이트됨
• Raw HTML
• Attribute Bindings

<div v-bine:id="dynamicId"></div>
const dynamicId = ref('my-id')

• 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 v-bind를 사용
• HTML의 id 속성 값을 vue의 dynamicId 속성과 동기화 되도록 함
• 바인딩 값이 null이나 undefind인 경우 렌더링 요소가 제거됨
• JavaScript Expressions

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('')}}
<div :id="`list-${id}`"></div>

• Vue는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원
• Vue 템플릿에서 JavaScript 표현식을 사용할 수 있는 위치
  • 콧수염 구문 내부
  • 모든 directive의 속성 값(v-로 시작하는 특수 속성)
• Expressions 주의사항
  • 각 바인딩에는 하나의 단일 표현식만 포함될 수 있음
    • 표현식은 값으로 평가할 수 있는 코드 조각(return 뒤에 사용할 수 있는 코드여야 함)
  • 작동하지 않는 경우

    <!-- 표현식이 아닌 선언식 -->
    {{ const number = 1 }}
    <!-- 흐름제어도 작동하지 않음. 삼항 표현식을 사용 -->
    {{ if (ok) {return message} }}
    	```

Directive

'v-' 접두사가 있는 특수 속성

• Directive의 속성 값은 단일 JavaScript 표현식이어야 함(v-for, v-on 제외)
• 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용
• 예시
  • v-if는 seen 표현식 값의 T/F를 기반으로

    요소를 제거/삽입

  		<p v-if="seen"> Hi There </p>

• Directive - Arguments
  • 일부 directive 는 directive 뒤에 콜론(:)으로 표시되는 인자를 사용할 수 있음

아래 예시의 href는 HTML <a> 요소의 href속성 값을 myUrl 값에 바인딩 하도록 하는 v-bind 인자
<a v-bind:href="myUrl">Link</a>

아래 예시의 click은 이벤트 수신할 이벤트 이름을 작성하는 v-on의 인자
<button v-on:click="doSomething">Button</button>
<button @:click="doSomething">Button</button>

• Modifiers
  • .(dot)으로 표시되는 특수 접미사로, directive가 특별한 방식으로 바인딩 되어야 함을 나타냄
  • 예를 들어 .prevent는 발생한 이벤트에서 event.preventDefault()를 호출하도록 v-on에 지시하는 modifier

<form @submit.prevent="onSubmit">...</form>

Built-in Directives

Dynamically data binding

v-bind 사용처

하나 이상의 속성 또는 컴포넌트 데이터를 표현식에 동적으로 바인딩

Attribute Bindings(html템플릿에 들어가는것)

• HTML 의 속성 값을 Vue의 상태 속성 값과 동기화 되도록 함

<img v-bind:src="imageSrc">
<a v-bind:href="myUrl">Move to url</a>

• v-bind shorthand(약어) -> ':' (colon)

<img :src="imageSrc">
<a : href="myUrl">Move to url</a>

• Dynamic attribute name(동적 인자 이름)
  • 대괄호로 감싸서 directive argument에 JavaScript 표현식을 사용할 수도 있음
  • JavaScript 표현식에 따라 동적으로 평가된 값이 최종 argument 값으로 사용됨

<button "[key]="myValue"></button>

대괄호 안에 작성하는 이름은 반드시 소문자로만 구성 가능(브라우저가 속성 이름을 소문자로 강제변환)

Class and Style Bindings

• 클래스와 스타일은 모두 속성이므로 v-bind를 사용하여 다른 속성과 마찬가지로 동적으로 문장려 값을 할당할 수 있음
• 그러나 단순히 문자열 연결을 사용하여 이러한 값을 생성하는 것은 번거롭고 오류가 발생하기가 쉬움
• Vue는 클래스 및 스타일과 함께 v-bind를 사용할 때 객체 또는 배열을 활용한 개선 사항을 제공

Class and Style Bindings 가 가능한 경우

1. Binding HTML Classes

• Binding to Objects
• Binding to Arrays

2. Binding Inline Styles

• Binding to Objects
• Binding to Arrays

Event Handling

From Input Bindings