Vuejs 템플릿 두번째 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

Vuejs 템플릿 두번째 정보

기타 Vuejs 템플릿 두번째

본문

디렉티브

 

디렉티브는 v- 접두사가 있는 특수 속성입니다. 


디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (나중에 설명할 v-for는 예외입니다.) 
디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것 입니다. 아래 예제에서 살펴보겠습니다.

 

<p v-if="seen">이제 나를 볼 수 있어요</p>


여기서, v-if 디렉티브는 seen 표현의 진실성에 기반하여 <p> 엘리먼트를 제거 또는 삽입합니다.

 

전달인자

 

일부 디렉티브는 콜론으로 표시되는 “전달인자”를 사용할 수 있습니다.
예를 들어, v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는데 사용됩니다.

<a v-bind:href="url"> ... </a>

여기서 href는 전달인자로, 엘리먼트의 href 속성을 표현식 url의 값에 바인드하는 v-bind 디렉티브에게 알려줍니다.

 

또 다른 예로 DOM 이벤트를 수신하는 v-on 디렉티브입니다.

 

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

 

전달인자는 이벤트를 받을 이름입니다. 우리는 이벤트 핸들링에 대해 더 자세하게 살펴 볼 것입니다.

 

수식어

 

수식어는 점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. 예를 들어, .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에게 알려줍니다.

 

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


나중에 v-on과 v-model을 더 자세히 살펴볼 때 수식어를 더 많이 사용할 것 입니다.

추천
0

댓글 1개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT