vue.js란?
사용자 인터페이스를 만들기 위한 progressive 프레임워크입니다. 뷰의 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 쉽다는 장점을 가집니다.
즉, js로 시각적인 부분을(프론트엔드를) 개발하기 위한 라이브러리 입니다.
프레임워크란
소프트웨어의 구체적인 부분에 해당하는 설계 및 재사용이 가능하도록 구성된 클래스들을 ‘모아놓은 것’을 의미합니다.
여담
js를 이용하는 개발 프레임워크로는 다음의 세가지가 있습니다.
React.js
입문 초반 난이도: 어려움. 결과물 완성도가 높은 편.Angular.js
리액트와 뷰의 중간 정도 난이도.Vue.js
프론트앤드 입문자가 공부하기에 비교적 쉽다.
시작하기
제이쿼리의 경우 cdn이라는 방법으로(html파일 윗 쪽에 제이쿼리 웹 링크를 선언해주는 것) 사용하죠?
이처럼 라이브러리는 소스를 직접 다운받을 필요 없이 웹에서 가져다가 사용할 수 있는데, vue 또한 마찬가지 입니다.
특별한 설치 없이 다음 문장을 index.html라는 파일을 생성하고, head태그 부분에 다음의 문장을 붙여넣어 줍니다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
그러면 vue를 사용하여 웹페이지를 가공할 준비 완료!
이 포스팅처럼 간단한 예제를 돌려보는 것(학습 목적)이 아니라 개발 목적으로 vue가 필요할 경우 npm이나 yarn을 사용하여 vue를 설치하여 사용해주세요 설치방법은 vue공식 문서를 참고하세요 ღ’ᴗ’ღ
vue 객체와 DOM 구조 연결하기
DOM(Document Object Model)이란?
HTML, XML 등과 같은 웹페이지 문서에서 태그나 속성들을 객체로 보고 트리구조로 구성한 것을 의미한다.
vue는 html 파일 내에서 객체로 만들어진 후 내가 그 객체에 정의한 변수명이나 메소드들을 호출하여 사용합니다.
이 과정에서 ``라는 템플릿 구문을 사용하여 html태그들 사이에 뷰 객체의 변수명을 출력할 수 있게 됩니다.
<!-- 파일명: index.html -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h1></h1>
</div>
//여기서 app은 전역변수이고, data내에 정의된 변수들은 (vue객체 내에서 사용되는)지역변수이다.
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 vue!',
title: '제목: hi'
}
})
index.html안에 <script>
태그를 만들어서 위 js 코드를 넣어주었습니다.
위 두 코드는 ‘app’이라는 이름의 뷰 객체로 연결되어 있다고 봐도 무방합니다. 뷰 객체의 data속성에 정의된 message
라는 지역 변수를, html문서에서는 ``구문을 통해 똑같은 변수명을 이용하여 값을 출력합니다.
뷰 객체는 new Vue({...})
라는 명령을 통해 생성되며 {...}
는 javascript 문법에서 객체를 의미합니다. 즉, vue객체는 javascript 객체를 파라미터로 받아 만들어지는 것이고 우리는 해당 객체 안에 원하는 vue 기능을 구현해주면 됩니다.
그 객체를 구성하는 항목은 el
, data
, mothods
, created
등이 될 수 있고 그 중 자주 쓰이는 항목 세 가지가 다음과 같습니다. 선택적으로 추가시킬 수 있는 항목(ex.created
, mounted
)에 대해서는 추후 포스팅에 추가하겠습니다.
el
html 엘리먼트의 id값을 등록하는 키워드. 등록된 태그 내에서 해당 vue의 기능이 동작한다.data
vue객체의 속성을 선언하는 키워드. 마치 지역변수를 선언하는 것과 같다.methods
메소드를 선언하는 키워드. vue객체 외부에서 [vue객체 이름].[메소드 이름] 으로 호출할 수 있다.
이처럼 뷰 객체와 돔 구조를 연결한다는 것은 모든것이 웹페이지가 동적으로 작동할 수 있음을 의미합니다.
개발자도구(F12
)에서 콘솔창에 app.message = 'hello vue!'
를 실행해보면 웹페이지에 변경된 값인 hello vue가 출력되는데 이를 통해 웹페이지가 반응형으로 동작하고 있음을 확인할 수 있습니다.
Vue객체에 대한 제어는 html문서상에서 <script>
태그 내에서 자유자재로 코딩해주면 되는데요, 기본적인 Vue의 구조는 세 가지로 나눌 수 있습니다.
vue 디렉티브 사용하기
디렉티브란 vue 객체(또는 요소)에서 사용되는 특별한 속성입니다. 각 디렉티브의 이름에는 vue가 지원하는 특별한 속성이라는 의미로 v-
라는 접두어가 붙습니다.
종류는 다음과 같습니다.
v-model
input태그에 입력된 값을 뷰 객체의 메소드나 속성에서 사용할 수 있도록 해준다.
v-bind
html 엘리먼트가 가지는 속성을 뷰 객체가 사용할 수 있도록 해준다.
v-if
조건이 true일 때 해당 html태그가 웹페이지에 보여지도록 한다. false일 때는 안보여진다.
v-show
(이미 만들어져 있는)html태그가 조건이 true일 경우에만 보여지도록 한다. ex.체크박스
v-for
조건에 따라 html 태그를 반복적으로 웹페이지에 출력해준다. ex.배열의 모든 원소 출력하기
v-on
뷰 객체의 메소드를 이용하여 이벤트 핸들링하고자 할 때 사용한다. ex.마우스 클릭, 버튼 클릭 등
다음은 다섯가지의 vue 앱 객체를 만들어서 각 vue객체가 연결된 div태그에서 디렉티브가 어떤 식으로 동작하는지를 나타낸 코드입니다.
<!-- Vue.js 선언 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 버튼 동작과 vue변수 출력 예제 -->
<div id="app-1">
<h1></h1>
<br>
<input type="text" v-model="m" placeholder="입력하세요" />
<p></p>
<button type="button" v-on:click="print">꾸욱</button>
</div><hr>
<!-- v-bind사용 예제 -->
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div><hr>
<!-- v-if사용 예제 -->
<div id="app-3">
<p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
<hr>
<!-- v-for사용 예제 -->
<div id="app-4">
<ol>
<li v-for="todo in todos">
</li>
</ol>
</div><hr>
<!-- v-model, v-show 사용 예제 -->
<div id="app-5">
<input type="checkbox" v-model="visible"/>
visible 변수값 :
<h3 v-show="visible">안녕하십니꽈</h3>
</div>
<script>
var app = new Vue({
el: '#app-1',
data: {
message: '안녕하세요 Vue!',
title: '제목: hi',
m: ''
},
methods: {
print: function () {
this.title = '버튼이 클릭되었다. 이 말이ㅑ아ㅏ'
}
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
}
})
var app5 = new Vue({
el: '#app-5',
data: {
visible: true
}
})
</script>
주의할 점
- 뷰 객체 내에 정의한 메소드에서 해당 객체의 지역변수를 사용하기 위해서는
this
키워드를 꼭 써줘야 한다. - 뷰 객체 내에서 data { … } 나 methods{ … }안에 여러가지를 정의하고자 할 때 반점
,
을 이용하여 나열해주어야 한다.
위 두 가지의 상황의 경우 문법 오류로 인식하기 때문에
웹페이지를 확인해보면 변수값이 출력되는게 아니라 ``템플릿이 문자열 그대로 출력됩니다.
java에서는 this
를 생략하고도 코드가 잘 작동하는데요, js에서는 this
를 생략할 수 없다는 점 헷갈리실 수도 있을 것 같아 적어보았습니다. 따라서, 구현한 웹페이지에서 형태로 출력되거나 예상하지 못한 결과가 출력된다면 위와 같은 문법 오류가 있는지 확인해보시면 좋을 것 같습니다. 저도 실수 많이 했거든요….
- 참고 자료
https://kr.vuejs.org/v2/guide/ : vue.js guide 문서. 예제 코드 출처