* vue.js를 공부하기 위해 공식문서를 정리하며 따라해보기로 하였다.
vue.js란
Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다.
라고 공식문서에 써있습니다. 그냥 이런거구나 하고 넘어가시면 되겠습니다.
선언적 렌더링
vue.js의 핵심은 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.
<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>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</body>
</html>
해당 내용을 실행하면 javascript안 data에 message로 선언한 '안녕하세요 Vue!' 정보가 html 의 message 정보로 들어가는것을 볼수 있다. 하지만 해당 화면으로 보면 기존 jsp로 만든 javascript와 큰 차이가 보이지 않는다. 하지만 Vue.JS 내부에서는 더 많은 작업을 하고 있다. 이제 데이터와 DOM이 연결되었으며 모든 것이 반응형이 되었습니다. 우리는 그것을 어떻게 확인할 수 있을까요? 브라우저의 JavaScript 콘솔을 열고 app.message를 다른 값으로 설정해 보십시오. 위 예제가 업데이트 변경된 값에 따라 업데이트되는 것을 볼 수 있습니다.
data 정보를 변경했더니 화면에 바로 바뀌는것을 볼수 있다.
<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-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
</script>
</body>
</html>
여기서 우리는 새로운 것을 만났습니다. v-bind 속성은 디렉티브 이라고 합니다. 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본적으로 “이 요소의 title 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지 합니다.”
공식문서에서는 갑자기 v-bind:title 을 적용하고 있다. 아마 vue.js를 하면 계속 보게될 v- 기능이지만 해당 속성 설명 없이 그냥 명시만 해놨다. v-bind 기능은 추후에 정리를 하고 해당 속성이 있구나 하고 넘어가면 되겠다.
해당 내용도 역시나 데이터만 변경하면 바로 적용된다.
조건문과 반복문
조건문
조건문은 당연 if를 사용하고 있다. 그리고 위에서 간단하게 설명한 vue에서 제공하는 속성 v- 와 합쳐져서 v-if 로 사용하면된다.
<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-3">
<p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
</body>
</html>
vue.js는 JSTL의 c:if문처럼 별도로 사용하지 않고 html 태그에 직접 사용한다. 소스에서 처럼 <p v-if="seen"> 로 적용하면 seen 상태에 따라 해당 영역이 노출 / 비노출 된다.
반복문
반복문은 for를 사용하고 있다. 그리고 vue에서 제공하는 속성 v- 와 합쳐져서 v-for 로 사용하면된다.
<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-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
}
})
</script>
</body>
</html>
해당 데이터도 동일하게 push 하자마자 렌더링 되면서 적용된다.
한번에 다 정리하려고 하였지만 너무 길어져서 2탄으로 다시 정리하도록 하겠습니다.
'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 시작하기 2탄 (0) | 2021.01.25 |
