{{ 이중 중괄호 }}


<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>



  • 위 예시에서 '{{ rawHtml }}'는 데이터를 HTML이 아닌 '일반 텍스트'로 해석된다.
  • 그리고 '{{ 이중 중괄호 }}'는 HTML 속성(attribute) 내에서 사용할 수 없다.
    • 이때 디렉티브를 이용한다!


속성 바인딩


  • v-bind 디렉티브를 이용
  • 단축 문법을 제공: :로 시작
  • 동일 이름 축약: 속성의 이름이 바인딩 되는 자바스크립트 값과 같을 경우, 속성 값 생략 가능
<!-- :id="id" 와 동일 -->
<div :id></div>

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

<button :disabled="isButtonDisabled">버튼</button>



const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

<div v-bind="objectOfAttrs"></div>


JavaScript 표현식 사용

{{ number + 1 }}

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

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

<div :id="`list-${id}`"></div>
  • 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원
    • 이중 중괄호(텍스트 보간법) 내부
    • 모든 Vue 디렉티브 속성(v-로 시작하는 특수 속성) 내부
  • 하나의 표현식만 가능
    • 선언식, 흐름 제어는 작동 안함


함수 호출

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>
  • 바인딩 표현식 내부에서 컴포넌트에서 노출하는 메서드를 호출 가능

  • 제한된 전역 접근

    • 템플릿 표현식은 샌드박스 처리되어 제한된 전역 리스트에만 접근 가능
    • 물론 app.config.globalProperties에 추가하여, Vue 내부의 모든 표현식에서 전역 속성에 접근 할 수 있도록 명시적으로 정의 가능하다.


app.config.globalProperties.msg = '안녕!'

export default {
  mounted() {
    console.log(this.msg) // '안녕!'
  }
}



디렉티브


  • 접두사 v-를 사용하여 Vue에서 제공하는 특수 속성을 사용
  • 이 게시글에서 다양한 빌트인 디렉티브 확인가능
  • 디렉티브 속성 값은 단일 JavaScript 표현식
    • v-for, v-on 및 v-slot 제외
  • 디렉티브의 역할은 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용


인자


  • 콜론(:)으로 표시되는 '인자' 사용


v-on 디렉티브

<a v-on:click="doSomething"> ... </a>

<!-- 단축 문법 -->
<a @click="doSomething"> ... </a>
  • DOM 이벤트 수신
  • v-on은 단축형으로 @를 대신 사용 가능


동적인 인자

<a v-bind:[attributeName]="url"> ... </a>

<!-- 단축 문법 -->
<a :[attributeName]="url"> ... </a>

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 단축 문법 -->
<a @[eventName]="doSomething"> ... </a>
  • 디렉티브의 인자를 대괄호로 감싸서 JavaScript 표현식으로 사용할 수도 있다.


동적인 인자 값 제약 조건

  • 동적인 인자는 null 또는 문자열로 평가

동적인 인자 문법 제약 조건

  • 동적인 인자 표현식에는 공백 및 따옴표와 같은 특정 문자가 HTML 속성 이름 내에서 유효하지 않음
  • 속성 이름을 소문자로 강제 변환


<!-- 이렇게 하면 컴파일러 경고가 트리거됩니다. -->
<a :['foo' + bar]="value"> ... </a>

<a :[someAttr]="value"> ... </a>
  • 컴포넌트에 someattr 대신 someAttr 속성을 사용했다면 코드가 작동안함


수식어

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


v-on:submit.prevent="onSubmit"
이름:인수.수식어=값


  • 점(.)으로 시작하는 특수한 접미사
  • ex) .prevent 수식어
    • 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에 지시




공식 메뉴얼
: https://ko.vuejs.org/guide/essentials/template-syntax