[ Vue.js란? ]
-UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크.
-MVVM(Model-View-ViewModel) 패턴을 따르며, 어플리케이션로직과 UI 분리를 위해 설계되었음.
-Angular.js나 React.js보다 많이 알려지진 않았지만 최근 급속도로 확산되고 있으며 실제 Google Trends의 검색어 비율과 GitHub에서 vue.js의 관심이 크게 올라간 것을 확인할 수 있음.
* 자바스크립트 프레임워크 트렌드 실시간 보기 : https://bestofjs.org/
* vue.js 사이트 : https://kr.vuejs.org/
[ Vue.js 장점 ]
-다른 프레임워크와는 달리 유연하고 가벼움
-angular.js와는 달리 전체 아키텍처를 새롭게 구성할 필요가 없고 기존의 웹 어플리케이션의 일부 UI만 적용하는것도 가능함.
-SPA(Single Page Application:단일 페이지 어플리케이션) 구성을 위해 필요한 라우터기능도 지원함.
-react.js와 마찬가지로 가상 DOM을 지원하여 빠른 UI렌더링이 가능
* vue.js와 다른 프레임워크의 차이점이 궁금하다면? : https://kr.vuejs.org/v2/guide/comparison.html
* React와 Angular 의 장점을 가진 프레임워크가 Vue
Vue는 Angular의 양방향 데이터 바인딩과, React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크다.
양방향 데이터 바인딩이란? 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다.
단방향 데이터 바인딩이란? 컴포넌트 단방향 통신을 의미하는데 컴포넌트 간 데이터를 전달할 때 항상 상위컴포넌트에서 하위컴포넌트 방향으로 전달하게끔 구조화 되어 있는것을 의미한다.
[ Vue.js 시작 / 예제 따라해보기 ]
-Vue JS 라이브러리를 다운로드 해도 되지만, 간단하게 테스트하기 위해 CDN 선언해주었다.
-어느 언어이건 간에 시작하기 전에는 Hello World! 를 찍어줘야 하는거 아닐까ㅎㅎ
Vue 인스턴스를 하나 생성하여 간단한 Vue App 을 만들어 보자.
-Vue에서는 {{}} 콧수염 모양을 닮았다고 해서 콧수염 표현식(Mustache Expression)을 사용하여 HTML DOM에 데이터를 렌더링 한다.
<!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>
<!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>
다음과 같이 index도 표현이 가능하다.
<div id="list">
<ul v-for="(item,index) in items">
<li>{{index}}</li>
<li>{{item.no}}</li>
<li>{{item.nm}}</li>
</ul>
</div>
'Web > Vue' 카테고리의 다른 글
| Vue.js개념 총정리(5)_vue실행도구,cli설치 (0) | 2021.02.02 |
|---|---|
| Vue.js개념 총정리(4)_템플릿문법,데이터바인딩,데이터변화감지 (0) | 2021.02.01 |
| Vue.js개념 총정리(3)_router(페이지이동),axios(http통신) (0) | 2021.01.31 |
| Vue.js 개념 총정리(2)_컴포넌트 통신규칙 (1) | 2021.01.30 |
| Vue.js 개념 총정리(1) _특징,장단점,컴포넌트,라이프사이클 (0) | 2021.01.29 |
