뷰의 템플릿 문법
뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다.
템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.
데이터 바인딩
데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다.
가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다.
<div>{{ message }}</div>new Vue({
data: {
message: 'Hello Vue.js'
}
})div 태그에 콧수염 괄호를 이용해 뷰 인스턴스 message 속성을 연결했다.
코드를 실행하면 화면에 Hello Vue.js라는 코드가 출력된다.
디렉티브
디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다.
화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있다.
v-if와 같이 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있다.
<div>
Hello <span v-if="show">Vue.js</span>
</div>new Vue({
data: {
show: false
}
})위의 코드는 show라는 데이터 속성 값에 따라 Vue.js 텍스트가 출력되거나 되지 않는 코드이다.
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>new Vue({
data: {
items: ['첫번째', '두번째', '세번째']
}
})v-for 디랙티브를 활용하면 데이터 속성의 개수만큼 화면의 요소를 반복하여 출력할 수 있다.
목록을 표시해야 할 때 유용하게 사용할 수 있는 기능이다.
뷰 컴포넌트
컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다.
컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.
컴포넌트 생성 코드 방식
컴포넌트를 생성하는 코드 형식은 다음과 같다.
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
})컴포넌트 생성 후 표시하기
Vue.component('app-header', {
template: '<h1>Header Component</h1>'
})app-header라는 컴포넌트를 만들었을 때 화면에서 표시할려면 아래와 같이 컴포넌트 이름을 추가하면 된다.
<div id="app">
<app-header></app-header>
</div>div 태그에 뷰 인스턴스가 생성되어 있다는 가정하에 위 템플릿 코드는 결과적으로 아래와 같이 표시된다.
<div id="app">
<h1>Header Component</h1>
</div>컴포넌트 등록 방법 2가지
컴포넌트를 등록하는 방법은 크게 2가지가 있다.
앞에서 살펴본 방식은 전역 컴포넌트를 등록하는 방법이고, 또 다른 방법은 지역 컴포넌트가 있다.
// 전역 컴포넌트 등록
Vue.component('app-header', {
templat: '<h1>Header Component</h1>'
})// 지역 컴포넌트 등록
var appHeader = {
templat: '<h1>Header Component</h1>'
}
new Vue({
components: {
'app-header': appHeader
}
})컴포넌트 통신 방식
뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다.
컴포넌트 간에 데이터를 주고 받기 위해서는 아래와 같은 규칙을 따라야 한다.
프록스 속성: 상위에서 하위로는 데이터를 내려줌
이벤트 발생: 하위에서 상위로는 이벤트를 올려줌
props 속성
프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법이다.
프롭스 속성을 기억할때는 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성으로 기억하면 쉽다.
props 속성 코드 형식
porps 속성을 사용하기 위해서는 하위 컴포넌트의 컴포넌트 내용과 상위 컴포넌트의 템플릿에 각각 코드를 추가해줘야 한다.
// 하위 컴포넌트의 내용
var childComponent = {
props: ['프롭스 속성 명']
}<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
<child-component v-bind:프롭스 속성 명="상위 컴포넌트의 data 속성"></child-component>
</div>props 속성 코드 예시
// 하위 컴포넌트: childComponent
var childComponent = {
props: ['propsdata'],
templat: '<p>{{ propsdata }}</p>'
}
// 상위 컴포넌트: root 컴포넌트
new Vue({
el: '#app',
components: {
'child-component': childComponent
},
data: {
message: 'hello vue.js'
}
})<div id="app">
<child-component v-bind:propsdata="message"></child-component>
<!-- 위의 출력 결과는 hello vue.js -->
</div>이벤트 발생
이벤트 발생은 컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방법이다.
이벤트 발생 코드 형식
하위 컴포넌트의 메서드나 라이프 사이클 훅과 같은 곳에 아래와 같이 코드를 추가한다.
// 하위 컴포넌트의 내용
this.$emit('이벤트 명');그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 템플릿에 아래와 같이 구현한다.
<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
<child-component v-on:이벤트 명="상위 컴포넌트의 실행할 메서드 명 또는 연산"></child-component>
</div>이벤트 코드 예시
// 하위 컴포넌트: childComponent
var childComponent = {
methods: {
sendEvent: function() {
this.$emit('update');
}
}
}
// 상위 컴포넌트: root 컴포넌트
new Vue({
el: '#app',
components: {
'child-component': childComponent
},
methods: {
showAlert: function() {
alert('event received');
}
}
})<div id="app">
<child-component v-on:update="showAlert"></child-component>
</div>위 코드는 하위 컴포넌트인 childComponent에서 sendEvent() 메서드가 실행되면 update 라는 이벤트가 발생되고, 이를 상위 컴포넌트인 루트 컴포넌트의 v-on 디렉티브로 이벤트를 받아 showAlert() 메서드를 실행하는 코드이다.
실행 결과는 event received 라는 경고창이 표시된다.
