Search

디렉티브

대분류
프레임워크
소분류
Vue.js
설명
v-text, v-show, v-once “속성”
유형
Vue
부유형
디렉티브
주요 레퍼런스
https://ko.vuejs.org/api/built-in-directives.html
속성
vue
최종 편집 일시
2024/10/31 03:29
생성 일시
2024/01/31 07:21
11 more properties

디렉티브

기본 사용법
v-on:submit.prevent="onSubmit" // 이름(name):전달인자(argument).수식어(modifiers)="값(value)"
JavaScript
복사

v-text {{양방향 데이터 바인딩}}

타입

string

설명

엘리먼트의 텍스트 컨텐츠를 업데이트

세부사항

•
v-text는 엘리먼트의 텍스트 컨텐츠 속성을 설정
•
엘리먼트 내부의 기존 컨텐츠를 덮어씀.
•
텍스트 컨텐츠의 일부를 업데이트해야 하는 경우, 이중 중괄호를 사용 필요

사용법

<span v-text="msg"></span> <!-- 아래와 같음 (추천) --> <span>{{msg}}</span>
TypeScript
복사

v-show

타입

any : truthy를 판단해줄 수 있는 값

설명

표현식의 truthy 값을 기반으로 엘리먼트의 가시성을 전환

세부사항

•
v-show는 인라인 스타일을 통해 display CSS 속성을 설정
•
엘리먼트가 표시될 때 초기 display 값을 설정하려고 시도
•
또한 조건이 변경될 때 전환을 트리거

사용법

<h1 v-show="ok">안녕!</h1>
TypeScript
복사

v-once

설명

엘리먼트와 컴포넌트를 한 번만 렌더링하고, 향후 업데이트를 생략
표현식 허용X

수식어

수식어
설명
.lazy
input 대신 change 이벤트를 수신함.
.number
유효한 입력 문자열을 숫자로 변환하여 전달. 인풋에 type="number"가 있으면 .number 수식어가 자동으로 적용
.trim
사용자가 입력한 값의 공백(” ”) 제거

세부사항

•
이후 다시 렌더링할 때 엘리먼트/컴포넌트 및 모든 자식들은 정적(Static) 컨텐츠로 처리되어 생략
◦
업데이트 성능을 최적화하는 데 사용 가능

사용법

<!-- 단일 엘리먼트 --> <span v-once>절대 바뀌지 않음: {{ msg }}</span> <!-- 자식이 있는 엘리먼트 --> <div v-once> <h1>댓글</h1> <p>{{msg}}</p> </div> <!-- 컴포넌트 --> <MyComponent v-once :comment="msg"></MyComponent> <!-- `v-for` 디렉티브 --> <ul> <li v-for="i in list" v-once>{{i}}</li> </ul>
HTML
복사