Vue.js 공식 가이드와 Do it! Vue.js를참조하였습니다.
Vue.js란?
Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.
숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.
시작하기
Vue.js를 사용할 수 있는 가장 간단한 방법은 단순히 <script>태그를 추가하는 것입니다.
<!-- 도움되는 콘솔 경고를 포함한 개발 버전 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
혹은 :
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>개발 버전이므로 다음과 같이 index.html을 만들어 주면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue.js 시작하기</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
선언적 렌더링
Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것입니다.
<div id="app">
{{ message }}
</div>
index.html이 있는 디렉토리에 app.js를 새로 만들어줄게요. 그리고 app.js에 다음 코드를 입력합니다.
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
우리는 이미 첫 Vue 앱을 만들었습니다! 문자열 템플릿을 렌더링하는 것과 매우 유사하지만 사실 Vue는 더 많은 작업을 합니다. 데이터와 DOM이 연결되어 이제 모든 것이 반응형입니다. 어떻게 알 수 있을까요? 브라우저의 JavaScript 콘솔을 열고 app.message를 다른 값으로 설정해 보십시오. 그에 따라 렌더링된 예제를 볼 수 있습니다.
텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩 할 수 있습니다.
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
여기서 우리는 새로운 곳에 다다랐습니다. v-bind 속성은 디렉티브라고 합니다. 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본적으로 "이 요소의 title 속성을 지닌 Vue 인스턴스의 message 속성으로 최신 상태를 유지합니다."
JavaScript 콘솔을 다시 열고 app2.message = '새로운 메시지' 라고 입력하면 HTML(이 경우에 title 속성)이 업데이트되었음을 다시 한번 확인할 수 있습니다.
'DEVLOG > Vue.js' 카테고리의 다른 글
| Vue.js 시작하기 - #4 컴포넌트를 사용한 작성방법 (0) | 2019.05.08 |
|---|---|
| Vue.js 시작하기 - #3 사용자 입력 핸들링 (0) | 2019.05.08 |
| Vue.js 시작하기 - #2 조건문과 반복문 (0) | 2019.05.08 |
| Vue.js와 Django를 이용한 웹앱 만들기 (0) | 2019.05.01 |
| Vue.js 스터디 참고자료 (0) | 2019.05.01 |
댓글