vue.js 기본 directive

vue.js 기본 directive

 

디렉티브	설명	예시	비고
v-text	값: string innerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자 그대로를 보여줌.	<p v-text="message"></p> <!-- 동일한 결과 --> <p>{{ message }}</p>	* 인코딩 : 입력한 문자나 기호들을 변환
v-html	값: string innerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면을 구현함.	<p v-html="message"></p>	XSS(Cross Site Scripting) 공격에 주의 * 파싱 :  간단히 문장이나 데이터 문자열(html, json 등)원하는 데이터를 분석하여 추출하는 기술 * xss 공격 :공격자가 상대방의 브라우저에서 스크립트가 실행되도록 사용자의 세션을 가로채거나 웹사이트를 변조하거나 악의적인 콘텐츠를 삽입하거나 피싱 공격을 하는 것을 말함 !!! 컴포넌트 사용하는 방법을 권장함.
v-on	값: function, inline-statement, object 약칭으로 @를 사용하며, 전달 인자는 event 임.	<span v-on:click="이벤트이름"></span> <!-- 동일한 결과 --> <span @click="이벤트이름"></span>
v-bind	약칭으로 :를 사용함. 태그와 태그 사이의 값을 다루는 것이 아니라 태그의 속성을 변경할 때 사용함.	<img v-bind:src="imgPath" /> <!-- 동일한 결과 --> <img :src="imgPath" />
v-model	input, textarea, select 요소들의 양방향 데이터를 공유할 때 사용함. * v-model은 엘리먼트의 초기값, checked 속성, selected 속성 모두를 무시하며 Vue 인스턴트 데이터를 원본 소스로 취급함. 따라서 기본값이 필요한 경우, 스크립트 영역에 data 옵션에서 초기값을 선언해주어야 함. * textarea에서는 텍스트 보간은 작동하지 않음.	<input type="text" v-model="inputText" /> <p v-text="inputText"></p>	.lazy : input 대신 change 이벤트를 수신 .number : 유효한 입력 문자열을 숫자로 캐스팅 .trim : 입력값에 공백 제어
v-show	값: any true, false의 여부로 css의 display와 동일한 기능.	<img :src="imgPath" v-show="true" />
v-if v-else-if v-else	값: any 표현식의 값이 true, false에 따라 엘리먼트를 조건부로 렌더링 함.
v-for	값: array, object, number, string, Iterable 원본 데이터를 기준으로 엘리먼트나 템플릿 block을 반복 렌더링함.	<li v-for="item in items" :key="item">{{ item }}</li>
v-pre	vuejs가 컴파일 하지 않게 함. {{}}도 그대로 보여짐.	<p v-pre>{{ name }}</p>
v-once	vuejs가 처음 한번만 렌더링을 수행함. 데이터가 변경되어도 처음 값만 보여줌.
v-clock	vuejs가 복잡할 경우, 컴파일되지 않은 값이 순간 나오는 경우가 있는데 이런것을 막아서 결과값만 안전하게 보여주게 함.