Vue.js Template

텍스트 보간법

{{}}형태

HTML출력: v-html

v-html 디렉티브 사용

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

v-html을 사용하여 템플릿을 작성할수없다, 따라서 UI재사용 및 구성을 위한 기본단위 컴포넌트가 선호된다.

속성 바인딩: v-bind

{{}}는 속성내에서 사용할 수 없습니다. 그 대신 v-bind 디렉티브를 사용하자

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

v-bind: id속성을 컴포넌트의 dynamicId속성과 동기화된 상태로 유지하도록 한다. 바인딩된 값이 null이나 undefined면 엘리먼트 속성이 제거된 상태로 렌더린 된다.

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

위 코드처럼 단축 문법으로도 사용가능

Boolean속성

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

disabled: 가장일반적 boolean속성 중 하나

isButtonDisabled가 truthy면 disabled속성이 표기, 빈 문자열이면 속성이 표기, falsy면 속성이 생략

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

data() {
	return {
    	objectOfAttrs: {
        	id: 'container',
            class: 'wrapper'
        }
   	}
}

속성을 나타내는 js객체가 있으면, 인자없이 v-bind를 사용해 단일 엘리먼트에 바인딩이 가능하다

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

----------------------------------

JS표현식 사용

지금까지 템플릿의 간단한 속성 키에만 바인딩했다.
vue는 실제 모든 데이터 바인딩 내에서 js표현식의 모든 기능을 지원한다.
이중중괄호 내부, 모든 Vue디렉티브 속성(v로 시작하는 특수 속성)내부에서 표현식을 사용할 수 있다.

하나의 표현식만 가능

각 바인딩에는 하나의 단일 표현식만 포함 가능하다. 표현식은 값으로 평가 가능한 코드 조각이다. 쉽게 말해서 리턴뒤에 사용가능한 코드여야만 한다.

따라서 다음 코드는 동작이 안된다.

표현식이 아닌 선언식
{{ var a = 1}}

흐름 제어대신 삼항 표현식을 사용하자
{{ if (ok) { return message }}

함수 호출

바인딩 표현식 내부에 컴포넌트에서 노출한 메서드 호출이 가능

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

바인딩 내부 함수는 컴포넌트가 업데이트될 때마다 호출되므로, 데이터 변경이나 비동기 작업 트리거하는 부작용을 없애야 한다.

제한된 전역 접근

템플릿 표현식은 샌드박스 처리돼 제한된 전역 리스트에만 접근이 가능하나다.
Math, Date등 일반적으로 사용되는 기본 제공 전역 객체를 표시한다.
'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'

리스트에 명시되지 않은 window와 같은 전역 속성은 템플릿 표현식에서 접근 할 수 없다.
그러나 app.config.globalProperties애 추가해서 Vue내부 모든 표현식에서 전역속성에 접근가능하게 명시적 정의할 수 있다.

---------------------------------------------