Devcafe: 새 문서: == Vue.js 개요 == * UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크. * MVVM(Model-View-ViewModel) 패턴을 따르며, 어플리케이션로직과 UI 분리 설계 * vue.js 사이트 : https://kr.vuejs.org/ == Vue.js 장점 == * 다른 프레임워크와는 달리 유연하고 가벼움 * angular.js와는 달리 전체 아키텍처를 새롭게 구성할 필요가 없고 기존의 웹 어플리케이션의 일부 UI만 적용하는것...

2024-10-14T17:28:22Z

새 문서: == Vue.js 개요 == * UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크. * MVVM(Model-View-ViewModel) 패턴을 따르며, 어플리케이션로직과 UI 분리 설계 * vue.js 사이트 : https://kr.vuejs.org/ == Vue.js 장점 == * 다른 프레임워크와는 달리 유연하고 가벼움 * angular.js와는 달리 전체 아키텍처를 새롭게 구성할 필요가 없고 기존의 웹 어플리케이션의 일부 UI만 적용하는것...

새 문서

== 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 생성
<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>
<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>
</source>

* 콘솔에서 직접 변수의 값을 변경해 볼 수도 있음.
* data 옵션은 vue 인스턴스가 관찰하는 데이터 객체를 의미 , 변경사항이 즉시 감지되어 반영
<source lang=html><h2>{{message}}</h2></source> 대신
<source lang=html><h2 v-text="message"></h2></source> 를 사용해도 된다.
<source lang=html>
<input type="text" v-bind:value="message"></h2>
</source>
=== 양방향 바인딩 v-model 디렉티브 예제 ===
<source lang=html>
<!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>
</source>

* 하나의 model 객체를 두개의 vue 인스턴스에서 참조하며 selectBox에서 바인딩하는 뷰 객체가 v-model을 사용해 양방향데이터 바인딩을 하여 model 객체의 lang이라는 배열에 값을 바로 변경하는 것.

=== v-if 디렉티브 예제 ===
* v-if는 조건에 부합될때에만 렌더링 화면이 자주 변경되는 부분에 대해서는 v-if보다는 v-show를 쓰는게 더 바람직
<source lang=html>
<!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>
</source>

=== 반복적인 데이터 표현을 위한 v-for 디렉티브 예제 ===
<source lang=html>
<!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>
</source>
=== 인덱스 예제 ===
<source lang=html>
<div id="list">
<ul v-for="(item,index) in items">
<li>{{index}}</li>
<li>{{item.no}}</li>
<li>{{item.nm}}</li>
</ul>
</div>
</source>

Vue.js - 편집 역사