Vue Directive & Instance Properties 학습정리

Directive

디렉티브	설명	예제	비고
v-text	innerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자그대로 보여줌	<p v-text="desc"></p>
v-html	innerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면에 구현함	<p v-html="desc"></p>	XSS(Cross Site Scripting) 공격에 주의
v-show	css의 display 와 동일한 기능	<img v-bind:src="imgPath" v-show="true"/>
v-if	if 조건문을 구현함
v-else	else 조건문을 구현함
v-else-if	else if 조건문을 구현함
v-for	for 반복문을 구현함	<tr v-for="image in images"> ... </tr>
v-on	엘리먼트에 이벤트 리스너를 연결합니다. v-on 은 생략 가능하다 v-on:click ⇒ @click 로 사용가능		@속성 으로 단축해서 표현 가능하다
v-bind	태그와 태그사이의 값을 다루는 것이 아니라 태그의 속성을 변경할 때 사용함 v-bind 는 생략 가능하다 v-bind:src ⇒ :src 로 사용가능	<img v-bind:src="imgPath" />	:속성 으로 단축해서 표현 가능하다
v-model	양방향 데이터를 공유할 때 사용함	<input type="text" v-model="name" /> <p v-text="name"></p>	lazy, number, trim 속성이 있음
v-slot
v-pre	vuejs가 컴파일하지 않게 함. {{}}도 그대로 보여짐	<p v-pre> {{name}} </p>
v-cloak	vuejs가 복잡할 경우 컴파일되지 않은 값이 순간 나오는 경우가 있는데 이런것을 막아서 결과값만 안전하게 보여주게 함
v-once	vuejs가 처음 한번만 렌더링을 수행함. 데이터가 변경되도 그냥 처음값만 보여줌

Instance Properties

옵션	설명	예제	비고
data	Vue가 바라보는 data 객체를 지정	data : { name : '홍길동'}	직접 객체를 작성해도 되고 미리 선언된 객체변수를 작성해도 됨
computed	함수로 정의하고 data객체 등을 사용하여 계산된 값을 리턴해 줌. methods와 차이점은 캐싱을 시켜놓고 동일한 요청이 또 올 경우는 함수를 실행하지 않고 캐싱된 값만 리턴해 줌 ( random method 를 computed 에서 쓰면 안됨, 호출시 마다 값이 변하면 methods 를 써야 한다 )	computed : { sum1 : function() {return 3 + 4}}	화살표함수는 사용 불가
methods	함수로 정의하고 data객체 등을 사용하여 계산된 값을 리턴해 줌. computed와 차이점은 캐싱이 되지 않고 호출될때마다 계속 함수를 실행함	methods : { sum2 : function() {return 3 + 4}}	화살표함수는 사용 불가
watch	지정된 변수를 계속 지켜보고 있다가 값이 변경되었을때 정의된 함수를 실행시킴 ( watch 는 변수 1개씩 모니터링을 하니 여러개의 변수에 반응 할 때는 computed 를 사용한다 )	watch : { x : function(v) {return v++ }}	x는 관찰하고자 하는 지정된 변수, 긴 시간이 필요한 비동기 처리가 필요할 경우 주로 사용됨(axios, fetch 등등..)

computed 의 set, get

get : computed 로 지정된 값을 사용할 때

set : computed 에 값을 설정할 때

get 과 set 을 이용해서 값을 가공해서 사용할 수 있다

v-model 로 form 바인딩

v-model.lazy : 입력을 완료 하고 focus 를 잃었을 때 변수에 바인딩 된다

v-model.number : 입력한 값이 숫자로만 구성되어 있을 경우 숫자로 변환하여 바인딩한다

v-model.trim : 사용자가 입력한 값 좌우에 공백이 있을 경우 공백을 제거하고 바인딩한다

Uploaded by N2T