[Vue] Vue_기본

Basic of Syntax

Text Interpolation

• 가장 기본적인 바인딩(연결)방법이다.
• 중괄호{}로 표기한다.
• DTL과 동일한 형태로 작성한다.
• Text interpolation방법은 모두 일반 텍스트로 표현한다.

RAW HTML

• Vue 컴포넌트에서 HTML 코드를 문자열 형태로 작성할 때 사용하는 방법이다.
• v-html directive을 사용하여 data와 바인딩한다.
• directive-HTML 기반 template syntax이다.
• HTML의 기본 속성이 아닌 Vue가 제공하는 특수 속성의 값으로 data를 작성한다.

JavaScript형식

• 템플릿 문법을 사용하여 HTML 코드와 JavaScript 코드를 함께 작성할 수 있도록 지원한다.
• 데이터를 렌더링하고, 이벤트 처리 및 조건부 렌더링 등 다양한 기능을 구현할 수 있다.
• 중괄호({{ }}) 안에 JavaScript 표현식을 작성하여 데이터를 출력할 수 있다.

Directives

• HTML요소의 동적인 동작을 구현할 수 있도록 지원한다.
• v-접두사를 사용하여 HTML태그에 추가되며, Vue.js 애플리케이션의 데이터와 연결되어 사용한다.
• Directive의 역할은 표현식의 값이 변경 될 때 반응적으로 DOM에 적용하는 것이다.

v-text

• Template Interpolation과 함께 가장 기본적인 바인딩 방법이다.
• {{}}와 동일한 역할을 한다.( 정확히 동일한 역할은 아님)

v-html

• HTML 코드를 렌더링할 때 사용되는 디렉티브이다.
• v-html 디렉티브를 사용하면 Vue.js 데이터 객체에 저장된 문자열을 HTML 요소로 렌더링할 수 있다.
• 단, 사용자가 입력하거나 제공하는 컨텐츠에는 절대 사용 금지! (XSS공격 관련)


v-show와 v-if

• 두 디렉티브 모두 조건부 렌더링 디렉티브이다.
• HTML 요소를 동적으로 보여주거나 숨길 수 있도록 지원한다.

차이점

• 초기 렌더링 비용
• v-show는 표현식 결과와 관계없이 초기 렌더링에서 HTML 요소가 항상 렌더링되어야 하기 때문에 v-if보다 비용이 더 높다.
• v-if는 표현식 결과가 false인 경우 렌더링조차 되지 않으므로 초기 렌더링 비용은 v-show보다 낮을 수 있다.
• 업데이트 비용
• v-show는 display속성 변경으로 표현 여부를 판단하므로 렌더링 후 toggle비용이 v-if보다 적다.
• v-if는 표현식 값이 자주 변경되는 경우 잦은 재렌더링으로 업데이트 비용이 v-show보다 높다
• v-show는 HTML요소를 자주 숨겨야하는 경우에 적합하며, v-if는 HTML요소를 자주 숨기지 않는 경우에 적합하다.


v-for

• 데이터 객체의 배열 요소를 순회하며 HTML 요소를 반복적으로 렌더링할 수 있다.
• index를 함께 출력하고자 한다면(char,index)형태로 사용 가능하다.
• v-for 사용시 반드시 key속성을 각 요소에 작성해야 한다.


v-on

• v-on 디렉티브를 사용하면 HTML 요소에서 발생하는 이벤트를 Vue.js 메서드와 연결할 수 있다.
• addEventListener의 첫 번째 인자와 동일한 값들로 구성된다.
• 이벤트 핸들러 메서드를 인라인으로 작성할 수 있다.
• @을 활용한 축약 문법 작성이 가능하다.


v-bind

• HTML 요소의 속성 값을 Vue.js 데이터 객체의 값과 바인딩할 수 있다.
• HTML 요소의 class나 style 속성을 바인딩하는 데에도 사용된다.


v-model

• 양방향 데이터 바인딩 디렉티브이다.
• v-model 디렉티브를 사용하면 HTML 입력 요소의 값과 Vue.js 데이터 객체의 값을 동기화할 수 있다.

Vue advanced

methods

• 호출 될 떄마다 함수를 실행하며, 같은 결과여도 매번 새롭게 계산한다.
• 수동으로 호출해야 하며, 응답성과 캐싱을 제공하지 않는다.

computed

• 함수의 종속 대상의 변화에 따라 계산여부가 결정된다.
• 종속 대상이 변하지 않으면 항상 저장(캐싱)된 값을 반환한다.
• 자동으로 응답성과 캐싱을 제공한다.
• computed는 일반적으로 methods보다 더욱 간단하고 가독성이 높은 코드를 작성할 수 있다.


watch

• 데이터 객체의 변화를 감시(watch)하고, 변화가 발생할 때마다 콜백 함수를 실행하는 방법이다.
• 데이터 객체의 속성 값이 변경되는 것을 감지하여 필요한 동작을 수행할 수 있도록 해준다.
• 데이터 객체의 속성 값이 변경될 때마다 다른 동작을 수행해야 하는 경우
• 계산된 속성(computed)으로 수행할 수 없는 비동기 작업이 필요한 경우
• 데이터 객체의 여러 속성을 감시하여 종속성이 복잡한 계산을 수행해야 하는 경우


filters

• 템플릿에서 데이터를 출력할 때, 데이터를 가공하거나 포맷팅하기 위한 방법 중 하나이다.
• 데이터를 출력하기 전에 필요한 처리를 수행하여, 데이터의 가독성을 높이거나 원하는 형태로 변환할 수 있다.

참고

Vue Style Guide