일상코딩/노트

Vue : Basic Syntax 1

코딩애벌레 2024. 4. 29. 14:22

오늘은 간단하게 Directive의 기본 형태와 어떤 종류가 있는지에 대해 살펴볼 예정이다. 굳이 나눈 이유는... 그만큼 세부사항이 중요하기 때문에 나눠 다루려고 한다. 가보자고

Template Syntax

: DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩(연결) 할 수 있는 HTML 기반 템플릿 구문을 사용

 

  • Text Interpolation

: 데이터 바인딩의 가장 기본적인 형태 ( Mustache syntax : 콧수염 구문 )

: 다른 언어에서도 많이 사용하는 형태로, 해당 구성 요소 인스턴스의 속성 값으로 대체한다

  • Raw HTML

: 변수나 함수를 호출하는 것이 아니라 HTML 자체를 호출 할 수 있는 방법

: 콧수염 구문은 데이터를 일반 텍스트로 해석하기 때문에 v-html을 이용하여 html을 통채로 넣는 방법

msg에 메세지를 담아두고 백틱호출 역시 가능하다.
호출 방식
문제없이 출력되는 모습

  • Attribute Bindings

: HTMl 속성 내에서 콧수염 구문을 사용할 수 없기 때문에 v-bind를 이용하여 속성을 동기화 시켜준다.

: 바인딩 값이 null이나 undefind인 경우 렌더링 요소에서 제거

v-bind:의 축약표현 : 으로 사용가능하다.
속성들이 제대로 추가된 모습

 

: Dynamic attribute name (동적 인자 이름)

- 대괄호 ([ ]) 로 감싸서 directive argument에 JavaScript 표현식을 사용 가능

- JavaScript 표현식에 따라 동적으로 평가된 값이 최종 argument 값으로 사용된다

* 대괄호 안에 작성하는 이름은 소문자로만 구성한다

 

과연 대괄호 안에 대문자를 사용하면 안될까? 그것은 아니다. 브라우저가 속성 이름을 소문자로 강제 변환하기 때문에 소문자로 작성하는 의미다. 예를들어 Vue에서 소문자로 정의 했고, 속성을 불러올때는 변수 대문자를 사용해도 자동 소문자변환을 통해 호출이 가능하다는 점을 확인할 수 있다.

반대로 Vue에서 대문자로 정의한다면, 속성을 호출할 때 소문자 속성을 찾게 되므로 Vue에 정의되지 않은 변수를 탐색을 시작하는데, 해당하는 값이 없어서 null값 처리되어 속성이 추가되지 않는 부분을 볼 수 있다.

 

  • JavaScript Expressions

: 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원한다

: 템플릿(HTML)에서 JavaScript 표현식을 사용 가능한 위치는 콧수염 구문 내부와 directive의 속성 값 ('v-' 속성)

다만, 표현식이 길어지면 가독성이 떨어지기 때문에 짧은 표현식만 사용한다.

Directive

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

: v-for, v-on을 제외하고 단일 JavaScript 표현식을 사용

Directive 전체 구문


Built-in Directives
Directives HTML내의 동작
v-bind = "속성"
HTML 요소를 동적으로 바인딩 (축약표현  :="속성" )
v-on = "이벤트 리스너"
EventListenr를 등록 (축약표현 : @="이벤트 리스너" )
v-model = "양방향 데이터"
양방향 데이터 바인딩
v-text = "텍스트"
다이렉트 Mustache 구문보다 보안, 성능, 렌더링 측면에서 이점이 있는 출력 바인딩
v-html = "HTML 요소 포함"
HTML요소인 태그, 속성까지 모두 전달 해줄 수 있는 바인딩
v-if = "조건부"  /  v-else-if = " 조건부"  /  v-else
조건부가 true일 경우 해당 Element 렌더링, 쌓기 가능

조건에 만족하지 않는다면 렌더링은 되어있지 않음

동적 데이터에 의해 조건부가 만족될 경우 추가 렌더링
v-show = " 조건부 "
v-if와 동작은 동일, v-else-if 나 v-else 같은 동작은 없음

조건에 부합할 경우 숨긴 렌더링 요소를 등장시킴

style="display:none"을 뜻함
v-for = "순회 반복" + key 속성
array 렌더링을 수행할 때에 사용

key 속성을 사용하는 이유는 순회한 각 항목을 고유하게 식별하기 위한 값으로 활용하기 때문. key를 통해 가상 DOM을 통해 노드를 효율적으로 업데이트 및 재사용 가능

 

주의사항

  • v-if와 v-for을 동시에 사용하지 않는다. template 태그를 추가 생성 및 감싸서 구분하는 것이 정확하다. 

Directive - Argument

 

: v-on의 경우 event를 의미

: v-bind의 경우 HTML 속성 대상을 의미

같은 형태여도 가리키는 의미가 다르기 때문에 유의하자

 

ex) <a v-bind:href = "myURL"> Link </a>

a 태그 속성으로 href(링크 속성)을 binding하고 myUrl을 값으로 넣어주는 것

 

ex) <button v-on:click = "doSomething">button</button>

button의 클릭 이벤트 발생 시 doSomething을 실행한다.

 


Directive - Modifiers

 

: . (dot)로 표시되는 특수 접미사로, directive가 특별한 방식으로 바인딩됨

: 예를들어 JavaScript에서 form의 submit event에 사용하던 event.preventDefault()를 호출하던 것을 v-on에 지시하는 modifier로 지정해줄 수 있다.

: prevent, stop(버블링 중지), capture, once 등 

화면이 팝업 및 렌더링될 때 선 실행을 방지하기 위한 키워드

가장 가볍게 핥아보기만 했는데 신경써야할 부분이 굉장히 많다. 언패킹이 진행되는 부분은 여러가지 데이터를 만져보면서 경험이 쌓여야 할 것 같다. 그래도 재밌다.

728x90