디렉티브

• Vue.js의 View에서 기능을 명령하는 역할

디렉티브	설명
v-text	태그를 인코딩하여 문자그대로 출력
v-html	태그를 파싱하여 화면에 구현
v-bind	태그의 속성 변경시 사용(.attr()과 유사)
v-model	양방향 데이터 공유 시 사용
v-show	웹페이지의 레이아웃 결정(css의 display와 동일)
v-if	if문 구현
v-else	else문 구현
v-else-if	else if문 구현
v-for	for문 구현
v-pre	vuejs가 컴파일되지 않음.{{}}도 그대로 보여짐
v-once	처음 한번만 렌더링 수행. 데이터 변경 후에도 처음값 출력
v-clock	컴파일 되지않은 값 출력을 막고 결과값만 출력

데이터바인딩

• 표시하고자 하는 데이터를 실제 데이터와 연결해주는 프로세스

단방향

• 컴포넌트 데이터 변경 시 UI요소 변경
• v-bind를 사용하면 서버를 거치지 않고 간편하게 데이터에서 연결 가능

양방향

• 컴포넌트 데이터와 UI요소가 상호변경됨
  • UI요소 변경 시 컴포넌트 데이터가 변경, 컴포넌트 데이터 변경 시 UI요소 변경

관련문법

{{}} 콧수염 표현식

• Mustache Expression
• HTML DOM에 렌더링 할 값을 불러오는 표현식

1. HTML
<p>{{message}}</p>

출력값: Hello,world

2. JavaScript
var app=new vue({
	el:'#app',
	data:{
		message:'Hello,world'
	}
})

3. 외부접근법
console.log(app.message)
출력값: Hello,world

v-bind

• HTML 속성 값(아이디, 클래스, 스타일 등)에 데이터 값 연결 시 사용

1. HTML
<div id="app">
	<p v-bind:class="classSample">클래스 바인딩</p>
</div>

2. JavaScript
new Vue({
	el:'#app',
	data:{
		classSample:'container'
	}
});

반복렌더링

• v-for 디렉티브를 적용해서 배열 출력 가능

1. HTML
<ul>
	<li v-for="item in fruits">{{item}}</li>
</ul>

2. JavaScript
var app = new Vue({
	el: '#app', 
	data:{
		list:['사과','배','오렌지']
	}
});

3. 결과값
<ul>
	<li>사과</li>
	<li>배</li>
	<li>오렌지</li>
</ul>

이벤트

• v-on 디렉티브를 사용해서 DOM 이벤트 연결

1. HTML
<button v-on:click="handleClick">Click</button>

2. JavaScript
var app=new Vue({
	el:'#app', 
	methods:{
		handleClick:function(event){alert(event.target)}
	}
})

input과 동기화

• v-model 디렉티브 사용
• input입력창에 문자 입력시 <p>요소 문자가 이를 따라감(동기화)

1. HTML
<input v-model="inputText">

2. JavaScript
new Vue({
	data:{
		inputText: ''
	}
})

출처: 캡틴판교 https://joshua1988.github.io/web-development/vuejs/v-model-usage/

조건분기

• v-if 디렉티브로 조건분기 가능
• false값일 때 태그 자체가 사라짐(DOM트리에서 완전삭제)

<div class="container">
	<div v-if="show">조건분기</div>
</div>

// true일 때
<div class="container">
	<div>조건분기</div>
</div>


// false일 때
<div class="container">
	
</div>