Vue template 문법

Template Syntax

렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용

1. Interpolation
2. Directive

 

Interpolation (보간법)

Text

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

RawHTML

<span v-html="rawHtml"></span>

Attributes

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

JS표현식

{{ number + 1 }}
{{ message.split('').reverse().join('') }}

 

Directive (디렉티브)

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

속성 값은 단일 JS 표현식이 됨 (v-for는 예외)

표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할을 함

전달인자 (Arguments)

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

• :(콜론)을 통해 전달인자를 받을 수도 있음

수식어 (Modifiers)

<form v-on:submit.prevent="onSubmit"> ... </form>

• . 점으로 표시되는 특수 접미사
• 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냄

 

v-text

엘리먼트의 textContent를 업데이트

내부적으로 interpolation 문법이 v-text로 컴파일 됨

 

v-html

엘리먼트의 innerHTML을 업데이트

• XSS 공격에 취약할 수 있음

임의로 사용자로부터 입력받은 내용은 v-html에 절대 사용금지

 

v-show

조건부 렌더링중 하나

엘리먼트는 항상 렌더링 되고 DOM에 남아있음

단순히 엘리먼트에 display CSS 속성을 토글

 

v-if, v-else-if, v-else

조건부 렌더링 중 하나

조건에 따라 블록을 렌더링

디렉티브의 표현식이 true 일때만 렌더링

엘리먼트 및 포함된 디렉티브는 토글하는 동안 삭제되고 다시 작성됨

v-if와 v-else 사이에는 어떤 태그도 들어가면 안된다.

참고) if문에서 조건을 안해주고 자동으로 true라고 지정해준다면 빈문자열 말고는 문자열은 true로 실행됨

1. 이렇게 지정해 주지 않는 경우에 문자열의 경우 자동으로 형변환이 이루어져 true로 반영된다.
<ol v-if="todo.completed">
2. 아래처럼 지정해 주면 문자열도 구별한다.
<ol v-if="todo.completed === true">

1번처럼 작성할 시 true로 반영되어 위에서 걸러져서 else-if문이 작동하지 않음
2번의 경우에는 문자열로 인식해서 해당 else-if문에 들어올 수 있다.
<ol v-else-if="todo.completed === 'pending'">

 

v-show 와 v-if

v-show

CSS display 속성을 hidden으로 만들어 toggle

실제로 렌더링은 되지만 눈에서 보이지 않는 것이기 때문에 딱 1번만 렌더링 되는 경우라면 v-if에 비해 상대적으로 렌더링 비용이 높음

하지만 자주 변경되는 요소라면 한번 렌더링 된 이후부터는 보여주는 지에 대한 여부만 판단하면 되기 때문에 토글 비용이 적음

 

v-if

전달인자가 false인 경우 렌더링 되지 않음

화면에서 보이지 않을 뿐만 아니라 렌더링 자체가 되지 않기 때문에 렌더링 비용이 낮음

하지만 자주 변경되는 요소에 경우 다시 렌더링 해야 하기 때문에 비용이 증가할 수 있음

 

정리

껐다 켰다 하는 경우에는 show 처음부터 다시 보여줄 일이 없으면 if 쓰는것이 좋음

v-show는 만들어짐 숨김상태로 만들어짐

v-if는 아예안만들어짐

 

v-for

원본 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링

item in items 구문 사용

item 위치의 변수를 각 요소에서 사용할 수 있음 - 객체의 경우는 key

v-for 사용시 반드시 key 속성을 각 요소에 작성 ( id값을 같이 적어주기 )

v-if와 함께 사용하는 경우 v-for는 v-if보다 우선순위가 높음 ( 가능하면 동시사용 권장 x -> 필터링을 해서 사용 )

 

v-on

엘리먼트에 이벤트 리스터를 연결

이벤트 유형은 전달인자로 표시

특정 이벤트가 발생했을 때, 주어진 코드가 실행됨

약어(Shorthand)

• @
• v-on:click -> @click

 

v-bind

HTML 요소의 속성에 Vue의 상태 데이터를 값으로 할당

Object 형태로 사용하면 value가 true인 key가 class 바인딩 값으로 할당

약어 - :

v-bind:href -> :href

 

v-model

HTML form 요소의 값과 data를 양방향 바인딩

수식어

• .lazy - input 대신 change 이벤트 이후에 동기화
• .number - 문자열을 숫자로 변경
• .trim - 입력에 대한 trim을 진행

 

Options/Data - 'computed'

데이터 기반으로 하는 계산된 속성

함수의 형태로 정의하지만 함수가 아닌 함수의 반환 값이 바인딩 됨

종속된 대상을 따라 저장(캐싱)됨

종속된 대상이 변경될 때만 함수를 실행

즉, Date.now() 처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트 되지 않음

반드시 반환값이 있어야함

 

computed& method

computed 속성 대신 methods 에 함수를 정의할 수도 있음

최종 결과에 대해 두 가지 접근 방식은 서로 동일

차이점은 computed 속성은 종속 대상을 따라 저장 캐싱 ) 됨

즉 computed 는 종속된 대상이 변경되지 않는 한 computed 에 작성된 함수를 여러 번 호출해도 계산을 다시 하지 않고 계산되어 있던 결과를 반환

이에 비해 methods 를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행

 

Options/Data = 'watch'

데이터를 감시

데이터에 변화가 일어났을 때 실행되는 함수

 

computed & watch

computed

특정 데이터를 직접적으로 사용 가공하여 다른 값으로 만들 때 사용

속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서 이야기하는 ‘선언형 프로그래밍’ 방식

특정 값이 변동하면 특정 값을 새로 계산해서 보여준다.

computed가 코드 반복이 적다는 점 -> 우수하다고 평가하는 경향

watch

특정 데이터의 변화 상황에 맞춰 다른 data 등이 바뀌어야 할 때 주로 사용

감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식으로 소프트웨어 공학에서 이야기하는 ‘명령형 프로그래밍’ 방식

특정 값이 변동하면 다른 작업을 한다.

특정 대상이 변경되었을 대 콜백 함수를 실행 시키기 위한 트리거

 

선언형 & 명령형

선언형 프로그래밍 - 계산해야 하는 목표 데이터를 정의 (computed)

명령형 프로그래밍 - 데이터가 바뀌면 특정 함수를 실행 (watch)

 

Options/Assets = 'filters'

텍스트 형식화를 적용할 수 잇는 필터

interpolation 혹은 v-bind를 이용할 때 사용 가능

필터는 자바스크립트 표현식 마지막에 |(파이프)와 함께 추가되어야 함

체이닝가능

 

Lifecycle Hooks

각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거침

• 예를 들어 데이터 관찰 설정이 필요할 경우, 인스턴스를 DOM에 마운트 하는 경우, 그리고 데이터가 변경되어 DOM을 업데이트 하는 경우 등

그 과정에서 사용자 정의 로직을 실행할 수 있는 Lifecycle Hook도 호출됨

공식문서 참고링크

 

created

 

created를 통해 애플리 케이션의 초기 데이터를 API 요청을 통해 불러올 수 있음

예시

 

lodash

모듈성, 성능 및 추가 기능을 제공하는 JS 유틸리티 라이브러리

array, object등 자료 구조를 다룰 때 사용하는 유용하고 간편한 유틸리티 함수들을 제공

reverse, sortBy, range, random ...