온라인강의 환경설정
jdk, tomcat, oracle, eclipse, spring설치 - 작동 확인
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Vue.JS
Vue.JS란
웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크
Progressive Framework : 화면단 라이브러리이자 프레임워크라고 볼 수 있음
화면 렌더링, 컴포넌트, 라우팅, 상태 관리 기능을 제공
컴포넌트 기반 프레임워크
MVVM패턴
View - ViewModel - Model구조로 이루어진 개발 패턴
Model => 자바스크립트 데이터를 의미한다.
View => 화면단 (HTML DOM)
VM => ViewModel => Vue 인스턴스를 의민한다. 데이터 변화가 일어나면 동적으로 화면에 데이터를 바인딩 해주고,
화면단의 변화가 일어나면 이를 모델(데이터)에 반영해주는 동작 등
화면 조작이 많이 일어나느 현대 웹앱에 적합한 구조를 가짐
Vue.js는 ViewModel에 해당하는 화면단 라이브러리이자 프레임워크
개발 환경 구성
크롬 브라우저, Visual Studio, Node.js, Live Server,
뷰 개발자 도구 (https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
vue객체 test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>Vue JS</h1>
<div id="app">
<h2 style='color:brown'>{{mymsg}}</h2>
</div>
<script>
var vm=new Vue({
el:'#app',
data: {
mymsg:'Hello Vue JS'
}
})
</script>
</body>
</html>F12에서 즉각적으로 수정 가능
Javascript를 이용해서 데이터를 변경했을 때는 이렇게 복잡하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript를 이용해서 데이터를 변경했을 때</h1>
<hr color="red">
<div id="app">
</div>
<script>
//var div=document.getElementById('app');
//view
var div=document.querySelector('#app');
//Model
var vm={};//javascript object
Object.defineProperty(vm,'str',{
get:function(){
console.log('get');
},
set:function(val){
div.innerHTML="<h2 style='color:blue'>"+val+"</h2>";
}
});
</script>
</body>
</html>Vue
V-Model 화면이 바뀌면서 모델이 같이 바뀐다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>Vue JS를 이용한 data binding </h1>
<div id="app">
<input type="text" name="msg" id="msg" placeholder="msg" v-model="mymsg">
<button>{{mymsg}}</button>
<P></P>
<input type="text" name="msg" id="msg" placeholder="number" v-model="number">
<!--number값 출력-->
<h2 style='color:brown'>{{number}}</h2>
</div>
<script>
var vm=new Vue({
el:'#app',
data: {
mymsg:'Hello Vue JS',
number:100
}
})
</script>
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 98일차 - Spring JSON데이터 생성, AOP VueJS dynamic, v-for (0) | 2020.09.11 |
|---|---|
| 국비지원 97일차 - VueJS directive (0) | 2020.09.10 |
| 국비지원 95일차 - Spring Mapping, 변수 객체로 받기, Component, 동적 MyBatis (0) | 2020.08.28 |
| 국비지원 94일차 - NodeJS mychat 입장, 퇴장, 채팅 (0) | 2020.08.27 |
| 국비지원 93일차 - Spring MVC 요청 처리 과정 (0) | 2020.08.26 |