다른 명령
Vue.js 개요
- UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크.
- MVVM(Model-View-ViewModel) 패턴을 따르며, 어플리케이션로직과 UI 분리 설계
- vue.js 사이트 : https://kr.vuejs.org/
Vue.js 장점
- 다른 프레임워크와는 달리 유연하고 가벼움
- angular.js와는 달리 전체 아키텍처를 새롭게 구성할 필요가 없고 기존의 웹 어플리케이션의 일부 UI만 적용하는것도 가능
- SPA(Single Page Application:단일 페이지 어플리케이션) 구성을 위해 필요한 라우터기능 지원
- 가상 DOM을 지원하여 빠른 UI렌더링이 가능
- vue.js와 다른 프레임워크의 차이점 비교 => https://kr.vuejs.org/v2/guide/comparison.html
- React와 Angular 의 장점을 가진 프레임워크가 Vue
- Vue는 Angular의 양방향 데이터 바인딩과, React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크
- 양방향 데이터 바인딩 이란? 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다.
- 단방향 데이터 바인딩이란? 컴포넌트 단방향 통신을 의미하는데 컴포넌트 간 데이터를 전달할 때 항상 상위컴포넌트에서 하위컴포넌트 방향으로 전달하게끔 구조화 되어 있는것을 의미한다.
예제 Hello World!
- Vue JS 라이브러리를 다운로드 해도 되지만, 간단하게 테스트하기 위해 CDN 선언
- Vue 인스턴스를 하나 생성하여 간단한 Vue App 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@2.3.3"></script>
</head>
<body>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
<div id="app">
{{ message }}
</div>
</body>
</html>
</source/>
<source lang=html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@2.3.3"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script>
var model = {
message : "Hello Vue.js~"
}
var _app = new Vue({
el : "#app",
data : model
})
</script>
</body>
</html>
- 콘솔에서 직접 변수의 값을 변경해 볼 수도 있음.
- data 옵션은 vue 인스턴스가 관찰하는 데이터 객체를 의미 , 변경사항이 즉시 감지되어 반영
<h2>{{message}}</h2>대신
<h2 v-text="message"></h2>
를 사용해도 된다.
<input type="text" v-bind:value="message"></h2>
양방향 바인딩 v-model 디렉티브 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@2.3.3"></script>
</head>
<body>
<div id="selectBox">
<div> 좋아하는 언어를 선택해보자 </div>
<input type="checkbox" value="java" v-model="lang">자바
<input type="checkbox" value="C" v-model="lang">C
<input type="checkbox" value="C#" v-model="lang">C#
</div>
<div id="selectedLang">
선택한 언어 ::
<span v-html="lang"></lang>
</div>
<script>
var model = {
lang : []
};
var selectBox = new Vue({
el : '#selectBox' , data:model
});
var selectedLang = new Vue({
el : '#selectedLang' , data:model
});
</script>
</body>
</html>
- 하나의 model 객체를 두개의 vue 인스턴스에서 참조하며 selectBox에서 바인딩하는 뷰 객체가 v-model을 사용해 양방향데이터 바인딩을 하여 model 객체의 lang이라는 배열에 값을 바로 변경하는 것.
v-if 디렉티브 예제
- v-if는 조건에 부합될때에만 렌더링 화면이 자주 변경되는 부분에 대해서는 v-if보다는 v-show를 쓰는게 더 바람직
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@2.3.3"></script>
</head>
<body>
<div id="account">
<input type="text" v-model="amount">
<h2 v-if="amount<0" > 마이너스</h2>
<h2 v-else-if="amount>0" > 플러스</h2>
<h2 v-else="amount>0" >문자 혹은0</h2>
</div>
<script>
var simple1 = new Vue({
el : "#account",
data : {
amount : 0
}
});
</script>
</body>
</html>
반복적인 데이터 표현을 위한 v-for 디렉티브 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@2.3.3"></script>
</head>
<body>
<div id="list">
<ul v-for="item in items">
<li>{{item.no}}</li>
<li>{{item.nm}}</li>
</ul>
</div>
<script>
var model = {
"items" : [
{ "no" : 1 , "nm" : "아이템1"},
{"no" : 2 , "nm" : "아이템2"},
{"no" : 3 , "nm" : "아이템3"}
]
};
var List = new Vue({
el : "#list",
data : model
});
</script>
</body>
</html>
인덱스 예제
<div id="list">
<ul v-for="(item,index) in items">
<li>{{index}}</li>
<li>{{item.no}}</li>
<li>{{item.nm}}</li>
</ul>
</div>