Vue 기본 기능(디렉티브와 템플릿)

텍스트 바인딩

 

• 템플릿에 다음과 같이 속성 이름을 작성하면 해당 위치에 값이 랜더링 됨

<!-- HTML -->
<p>{{ message }}</p>

// Javascript 
var app = new Vue({
	el: '#app',
    data: {
    	message: 'Hello Vue.js!'
    }
})

<!-- 실제 랜더링 결과 -->
<p>Hello Vue.js!</p>

 

 

• 옵션에 정의한 데이터는 다음과 같이 외부에서 접근 가능함

console.log(app.message) // Hello Vue.js!

 

 

 

반복 랜더링 v-for

 

• 기사 목록 또는 상품 목록과 같은 리스트는 data 옵션에 등록한 배열 또는 객체에 v-for 디렉티브를 적용해서 반복 랜더링 할 수 있음

 

<!-- HTML -->
<ol>
	<li v-for="item in list">{{ item }}</li>
</ol>

// Javscript
var app = new Vue({
	el: '#app',
    data: {
    	list: ['사과', '바나나', '딸기']
    }
})

<!-- 실제 랜더링 결과 -->
<ol>
	<li>사과</li>
    <li>바나나</li>
    <li>딸기</li>
</ol>

 

 

 

 

이벤트 사용하기 v-on

 

• 클릭했을 때, 선택한 요소가 변경되었을 때처럼 DOM 이벤트 바인딩(이벤트 연결)을 할 때는  v-on 디렉티브를 사용함.
• 다음 예는 버튼을 클릭했을 때 handleClick 메서드가 호출됨
• addEventListner나 jQuery의 $(element).on 메서드와 비슷하게 작용함

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

// Javascript
var app = new Vue({
	el: '#app',
    methods: {
    	handleClick:function(event): {
        	alert(event.target) // [object HTMLButtonElement]
        }
    }
})

 

 

 

입력 양식과 동기화하기 v-model

 

 

• 데이터와 입력 양식 입력 항목을 바인딩 할 때는 v-model 디렉티브 사용함
• 입력 또는 선택을 하면 곧바로 데이터와 DOM에 반영됨
• 예제에서는 입력 양식에 입력한 문자와 <p> 요소의 문자를 동기화 함

 

 

<!-- HTML -->
<p>{{ message }}</p>
<input v-model="message">

// Javascript
var app = new Vue({
	el: '#app',
    message: '초기 메시지'
    }
})

 

 

.number 장식자를 추가하면 입력 값을 숫자로도 받을 수 있음

<input v-model.number="count">

 

 

 

조건 분기 v-if

 

• 템플릿 기반의 조건 분기를 실시할 수 있음
• 다음 예는 show 속성이 true일 때만 <p> 요소를 랜더링 함

 

<!-- HTML -->
<p v-if="show">Hello Vue.js</p>

// Javascript
var app = new Vue({
	el: '#app',
    data: {
    	show: true
    }
})

 

아래처럼 작성하면 화면에 있는 <p>요소가 DOM에서 사라짐

app.show = false

 

 

 

트랜지션과 애니메이션

 

• transition 태그를 사용하면, 템플릿 내부의 요소들에 css 트랜지션과 애니메이션을 손쉽게 사용할 수 있음

 

<!-- HTML -->
<button v-on:click="show=!show">변경하기</button>
<transition>
	<p v-if="show">Hello Vue.js!</p>
</transition>

// Javascript
var app = new Vue({
	el: '#app',
    data:{
    	show: true
    }
})

// CSS

.v-enter-active, .v-leave-active {
	transition: opacity 1s;
}
/* opacity:0에서 1까지 페이드인&페이드아웃하기 */
.v-enter, .v-leave-to {
	opacity: 0;
}

 

 

 

 

참고: 고양이도 할 수 있는 Vue.js