반응형
지난번 vue.js 공식문서 따라하기 - vue.js 시작하기 1탄 에 이어서 시작합니다.
사용자 입력 핸들링(v-on)
사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가 할 수 있습니다
말이 어렵게 써있지만 javascript의 onclick 이벤트와 비슷한 기능이다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Sample</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: '안녕하세요! Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
reverseMessage 메소드를 호출해서 message 데이터를 뒤집었다. dom 조작은 vue 내에서 처리하고 우리는 기본적인 로직으로 진행하면 된다.
사용자 입력 핸들링2(v-model)
우리는 v-on이라는 사용자 입력 핸들링을 했지만 실시간 핸들링을 할때는 v-model을 사용한다. 거기다가 양방향 바인딩을 할수 있는 디렉티브이다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Sample</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</body>
</html>
컴포넌트를 사용한 작성방법
컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.
공식문서를 한국어로 변경해서 보면 번역이라 그런지 해당 내용으론 이해가 안되지만 그림으로 보면 간단합니다.
가장 위의 root component 가 있고 안에 3개의 component 로 구성합니다. 2번째 component는 2개의 component 로 구성되어있고 3번째 component 는3개의 component 로 구성되어있습니다.(그림 2번째 숫자 참고)
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Sample</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app-7">
<ol>
<!--
이제 각 todo-item 에 todo 객체를 제공합니다.
화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다.
또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
</body>
</html>
이것은 인위적으로 만든 예시이지만, 우리는 앱을 두 개의 더 작은 단위로 나눌 수 있었고, 자식을 props 인터페이스를 통하여 부모로부터 합리적인 수준으로 분리할 수 있었습니다. 이제 앞으로는 부모 앱에 영향을 주지 않으면서 <todo-item> 컴포넌트를 더 복잡한 템플릿과 로직으로 더욱 향상시킬 수 있을 것입니다.
공식문서에 component를 설명하기 위한 소스인데 크게 와닿지 않는 소스입니다. 아마 설명을 위한 소스이므로 vue는 component로 화면을 구성하는구나 라고만 알고 넘어가시면 되겠습니다.
이렇게 간단한 vue 시작하기를 정리해보았습니다. 천천히 vue 공식문서를 파악하며 정리하도록 하겠습니다~
반응형
'vue.js > vue.js 공식문서' 카테고리의 다른 글
| vue.js 공식문서 따라하기 - Conditional Rendering(조건부 렌더링) (0) | 2021.02.19 |
|---|---|
| vue.js 공식문서 따라하기 - computed와 watch (0) | 2021.02.16 |
| vue.js 공식문서 따라하기 - 템플릿 문법(Template Syntax) (0) | 2021.01.29 |
| vue.js 공식문서 따라하기 - vue 인스턴스(Instance) (0) | 2021.01.26 |
| vue.js 공식문서 따라하기 - vue.js 시작하기 1탄 (0) | 2021.01.24 |
