Vuejs 개념 정리01 템플릿 문법(보간법, 디렉티브, 약어)
해당 게시글은 Vuejs Tutorial을 리뷰한 내용입니다.
1. 보간법
- 문자열
데이터 바인딩의 기본 형태는 Mustache구문임
= 이중 중괄호 {{ }}를 사용한 텍스트 보간임
이렇게
<span>메시지: {{ msg }}</span>Mustache 태그는
해당 데이터 객체의 msg 속성 값으로 대체됨
데이터 객체의 msg 속성이 변경될 때 마다 갱신됨
매번 갱신되는 게 싫으면
v-once 이용해서 업데이트 안되는 일회성 보간을 할 수 있음
근데 같은 노드의 바인딩에도 영향을 미쳐서 해야 함
<span v-once>다시는 변경하지 않습니다: {{ msg }}</span>
- 원시 HTML
Mustache 구문은 HTML이 아닌 일반 텍스트로 데이터를 해석함
그러면,
실제 HTML을 출력하려면 어떻게 해야 할까
v-html 디렉티브를 사용해야 한다
그러니까,
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>이렇게 쓰면
Using mustaches: <span style="color: red"> This should be red </span>
Using v-html directive: This should be red
이렇게 나온다는 의미다
- 속성
Mustaches는 HTML 속성에서 사용할 수 없음
⇒ 대신 v-bind 디렉티브를 사용한다
<div v-bind:id="dynamicID"></div>
boolean 속성의 경우,
<button v-bind:disabled="isButtonDisabled">Button</button>isButtonDisabled가 null, undefined, false의 값을 가지면
⇒ disabled 속성은 렌더링 된<button>엘리먼트에 포함되지 않는다
- 자바스크립트 표현식
Vue.js는 모든 데이터 바인딩 내에서 자바스크립트 표현식의 모든 기능을 지원
⇒ Vue 인스턴스 데이터 범위 내에서 자바스크립트로 계산되는데
⇒ 각 바인딩에 하나의 단일 표현식만 포함할 수 있음\
그러니까 예를 들면
{{ var a=1 }} 이런건 구문이지 표현식이 아님
{{ if (ok) { return message } }} 얘는 조건문이니 작동안함
2. 디렉티브
디랙티브:
- v- 접두사가 있는 특수 속성
- 디렉티브 속성 값 = 단일 자바스크립트 표현식 (예외: v-for)
- 역할: 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용
<p v-if="seen">이제 나를 볼 수 있어요</p> //v-if 디렉티브는 seen 표현의 진실성에 기반 //<p> 엘리먼트를 제거 or 삽입
엘리먼트? 태그?
엘리먼트? 태그?
- 엘리먼트
- html을 문서형식으로 구성할 때 특정 의미를 표현하는 단어
- html에서 시작, 종료태그로 된 모든 명령어
- p엘리먼트는 paragraph를 의미하는 엘리먼트
- img엘리먼트는 image를 의미하는 엘리먼트
- 태그
- 꺽쇠기호로 둘러싸인 엘리먼트의 조합 <>
- <p>를 p태그
- <img>를 img태그
엘리먼트: <p>이건 엘리먼트</p>
태그: <p>
- 전달인자
전달인자는 이벤트를 받을 이름
예를 들어,
<a v-bind:href="url"> ... </a>href : 전달인자
⇒ 엘리먼트의 href 속성을
⇒ 표현식 url의 값에 바인드하는 v-bind 디렉티브에게 알려줌
2.6.0 버전부터는 동적 전달인자가 추가됐다
Javascript 표현식을 대괄호로 묶어 디렉티브의 아규멘트로 사용하는 게 가능해짐
<a v-bind:[attributeName]="url"> ... </a>그러니까,
attributeName은 Javascript형식으로 동적 변환
⇒ 그 변환결과가 전달인자의 최종적인 값value로 사용
예를 들면,
내 Vue 인스턴스에서
href라는 값을 가진 attributeName 데이터 속성을 가진 경우
⇒ 바인딩은 v-bind:href와 같음
비슷하게,
동적인 이벤트명에 핸들러를 바인딩 할 때 동적 전달인자 활용 가능
<a v-on:[eventName]="doSomething"> ... </a>그러니까,
eventName의 값이 "focus" 라고 하면
⇒ v-on:[EventName]은 v-on:focus와 같음
근데 동적 전달인자에는 제약이 있다
1번 동적 전달인자 값의 제약
동적 전달인자는, null을 제외하고는 string으로 변환될 것 ((예상))
특수 값인 null은 명시적으로 바인딩을 제거하는데 사용됨
그 외의 경우, string이 아닌 값은 경고를 출력
2번 동적 전달인자 형식의 제약
동적 전달인자의 형식에는 문자상의 제약이 있음
스페이스, 따옴표 같은 문자가 HTML의 속성명으로서 적합하지 않기 때문
그러면,
스페이스나 따옴표를 포함하지 않는 형식을 사용하거나, 복잡한 표현식을 계산된 속성으로 대체하면 해결될 것
예를 들어,
<a v-bind:['foo' + bar]="value"> ... </a> // 컴파일러 워닝 발생
** in-DOM 탬플릿을 사용할 때(탬플릿이 HTML파일에 직접 쓰여졌을 때),
브라우저가 모든 속성명을 소문자로 만들어 대문자의 사용을 피하도록 하는 게 좋다
<!-- in-DOM 탬플릿에서는 이 부분이 v-bind:[someattr]로 변환
인스턴스에 "someattr"속성이 없는 경우, 이 코드는 동작하지 않음 -->
<a v-bind:[someAttr]="value"> ... </a>
- 수식어
점으로 표시되는 특수 접미사
디렉티브를 특별한 방법으로 바인딩 해야 함을 의미
예를 들어,
<form v-on:submit.prevent="onSubmit"> ... </form>.prevent 수식어는
트리거된 이벤트에서 event.preventDefault()를 호출하도록
v-on 디렉티브에게 알려줌
3. 약어
v- 접두사는 템플릿의 Vue 특정 속성을 식별하기 위한 시각적인 신호 역할을 하는데,
자주 사용하는 디렉티브를 사용할 때는 필요가 없음
동시에 Vue.js가 모든 템플릿을 관리하는 **SPA**를 만들 때 필요성이 떨어짐
⇒ 가장 많이 사용하는 디렉티브 v-bind, v-on약어 제공
v-bin
<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>
<!-- 약어 -->
<a :href="url"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on
<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>
<!-- 약어 -->
<a @click="doSomething"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>