고리타분한 개발자
[Vue JS] Practical Component Exercise #1: Message 본문
기본적인 컴포넌트 사용에 대하여 알아보았으니, 이젠 컴포넌트가 어떻게 사용되는지 연습해볼 차례입니다. 우선 진행하기에 앞서 "https://bulma.io/" 사이트를 한번 둘러봐주세요. 이번시간에는 bulma라는 api를 사용하도록 하겠습니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<style type="text/css">
body {
padding-top: 40px;
}
</style>
</head>
<body>
<div id="root" class="container">
<article class="message">
<div class="message-header">
<p>Hello World</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula,
id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
위의 코드는 bulma cdn을 사용하여 "https://bulma.io/documentation/components/message/" 부분을 인용한 코드입니다.
결과값은 이렇습니다. 이제 우리는 Vue 컴포넌트를 이용하여 이 코드를 변화시켜볼 차례 입니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<style type="text/css">
body {
padding-top: 40px;
}
</style>
</head>
<body>
<div id="root" class="container">
<message title="Hello World" body="Lorem ipsum dolar sit amet."></message>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
// main.js
Vue.component('message', {
props: ['title', 'body'],
template: `
<article class="message">
<div class="message-header">
{{title}}
</div>
<div class="message-body">
{{body}}
</div>
</article>
`
})
new Vue({
el: '#root'
})
title과 body값을 나타내는 message라는 컴포넌트를 생성하였습니다. 이전 컴포넌트들과 달리 이 컴포넌트는 props라는 새로운 속성이 추가되었습니다. 새로운 프로퍼티인 title과 body를 사용하기 위해서는 title과 body를 컴포넌트의 props속성안에 추가시켜 주어야 합니다. 이렇게되면 <message> 엘리먼트를 사용할 때마다 title과 body의 값을 전달할 수 있습니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<style type="text/css">
body {
padding-top: 40px;
}
</style>
</head>
<body>
<div id="root" class="container">
<message title="Hello World" body="Lorem ipsum dolar sit amet."></message>
<message title="Hello Universe" body="Blar Blar"></message>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
// main.js
Vue.component('message', {
props: ['title', 'body'],
data() {
return {
isVisible: true
};
},
template: `
<article class="message" v-show="isVisible">
<div class="message-header">
{{title}}
<button type="button" @click="isVisible=false">x</button>
</div>
<div class="message-body">
{{body}}
</div>
</article>
`,
// methods: {
// hideModal() {
// this.isVisible = false;
// }
// }
})
new Vue({
el: '#root',
})
이번에는 코드를 좀 변경시켜 보았습니다.
위 코드는 사진과 같은 결과를 나타내어 줍니다.
<article class="message" v-show="isVisible">
코드의 article 영역은 v-show-"isVisible" 옵션이 주어져 있습니다.
<button type="button" @click="isVisible=false">x</button>
윗 부분을 보면 버튼을 클릭하면 isVisible이 false가 되는 이벤트를 주게 되어있습니다. 그러므로 x버튼을 누르게 되면 화면에서 보이지 않게 됩니다.
'Vue JS > Step By Step' 카테고리의 다른 글
| [Vue JS] Practical Component Exercise #3: Tabs (0) | 2017.12.05 |
|---|---|
| [Vue JS] Practical Component Exercise #2: Modal (0) | 2017.12.05 |
| [Vue JS] Components Within Components (0) | 2017.12.04 |
| [Vue JS] Components 101 (0) | 2017.12.04 |
| [Vue JS] The Need for Computed Properties (0) | 2017.12.04 |
'Vue JS/Step By Step' Related Articles
more
Comments