[Vue] Vue & 인스턴스
Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다. Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orgVue의 핵심 기능으로는 선언적
hong-study.tistory.com
이전에는 Vue와 인스턴스에 대해 공부를 했다. 이번에는 Vue의 템플릿 문법은 무엇이 있는지와 Component란 무엇인가에 대해 공부해보려고 한다.
뷰의 템플릿 문법
뷰의 템플릿 문법은 뷰로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.
데이터 바인딩
데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 아마 Spring Boot 혹은 Spring 환경에서
Thymeleaf 구문을 사용해본적이 있다면 이해하기 쉬울 것이다.
가장 기본적인 데이터 바인딩 방식은 콧수염 괄호 방식 ( Mustache Tag ) 이다.
<div>{{ message }}</div>new Vue({
data: {
message: 'Hello Vue.js'
}
})div 태그에 해당 괄호를 이용해 인스턴스의 message 속성을 연결한다. 코드를 실행하면 message 속성에 지정된 값이 출력된다.
디렉티브
디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다.
화면 조작에서 자주 사용되는 방식을 모아 디렉티브 형태로 제공한다.
예를 들어 아래와 같이 특정 속성 값에 따라 화면의 영역을 표시허가나 표시하지 않을 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>데이터바인딩</title>
</head>
<body>
<div id="app">
<!-- {{message}} -->
<p v-bind:id="uuid" v-bind:class="name">{{num}}</p>
<p id="abc1234">{{doubleNum}}</p>
<div v-if="loading">Loading...</div>
<div v-else>test user has been logged in</div>
<div v-show="loading">show test</div>
<input type="text" v-model="str">
<p>{{str}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue ({
el : "#app",
data : {
message : "123",
num : 10,
uuid : 'abc1234',
name : 'text-blue',
loading : true,
str : ''
},
computed : {
doubleNum : function(){
return this.num * 2;
}
}
})
</script>
</body>
</html>vue 인스턴스 속성 중 loading과 str 부분을 확인을 하면, 현재 각 각 true와 빈 값이 저장되어 있다.
이때 디렉티브는 v-if / v-else / v-show를 이용하여 화면에서 표출되는 값을 반응성으로 조작할 수 있다.
이렇게 디렉티브를 이용하면 들어오는 값에 따라 출력되는 문자 혹은 데이터를 다르게 처리할 수 있다.
위와 별개로 v-for라는 구문도 존재하는데, v-for를 이용하면 데이터 속성의 개수만큼 반복하여 출력하는 것 또한 가능하다.
뷰 컴포넌트
컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 쉽게 설명하면 부분적으로 구현해 필요할 때마다 뽑아서 쓸 수 있다.
컴포넌트 생성 방법
Vue.component("컴포넌트 명", {컴포넌트 내용} );위와 같이 설정이 가능하다.
컴포넌트 명의 경우 식별하기 좋은 이름으로 지정을 하고,
내용 내부에는 templates 부터 props 등 다양한 속성을 사용하여 내용을 작성할 수 있다.
그리고 컴포넌트는 전역 컴포넌트와 지역 컴포넌트로 나뉘는데, 먼저 전역 컴포넌트에 대해 알아보려고 한다.
<body>
<div id="app">
<app-header></app-header>
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컴포넌트
Vue.component("app-header", {
template : "<h1>header</h1>"
});
Vue.component("app-content", {
template : "<div>content</div>"
});
var vm = new Vue({
el: "#app",
});
</script>
</body>위 구문을 보면 app-header와 app-content 두 가지의 컴포넌트를 구성하였다.
해당 컴포넌트 작성 방식은 전역 컴포넌트를 사용하는 것으로, 어느 한 곳에 속하지 않고 다양하게 사용이 가능하다.
아래는 지역 컴포넌트 작성 방식이다.
<body>
<div id="app">
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
</div>
<div id="app2">
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
components:{
"app-header" : {
template : "<h1>header</h1>"
},
"app-content" : {
template : "<h3>content</h3>"
},
"app-footer" : {
template : "<footer>footer</footer>"
}
},
});
var vm2 = new Vue({
el: "#app2",
components:{
"app-header" : {
template : "<h1>header</h1>"
},
"app-content" : {
template : "<h3>content</h3>"
},
"app-footer" : {
template : "<footer>footer</footer>"
}
},
})
</script>
</body>각 각의 vue 내부에 별도로 작성을 하는 방식으로, 이렇게 되면 각 각의 지역 컴포넌트는 전체 영향을 주지 않고, 특정 인스턴스 내부에서 별도로 사용할 수 있다.
'Programming > Vue' 카테고리의 다른 글
| [Vue] 라우터 ( Router ) (0) | 2024.06.25 |
|---|---|
| [Vue] 컴포넌트의 통신 방식 ( Props, Emit ) (0) | 2024.06.25 |
| [Vue] Vue & 인스턴스 (0) | 2024.06.25 |
