Vue.js
사용자 인터페이스를 구축하기 위한 프로그레시브 프레임워크입니다. 다른 모놀로식(monolithic : 단단히 짜여 하나로 되어 있는) 프레임워크와 달리 Vue는 작은 단위로 쪼개서 사용(적용)할 수 있도록 설계되어 있습니다.
핵심 라이브러리는 view 계층에 초점을 맞추고 있습니다. 따라서 다른 라이브러리 보다 사용하기 쉽고, 기존 프로젝트와 통합하는 것도 간단합니다. 또한, 방대한 자바스크립트 툴(소스)과 방대한 라이브러리를 함께 사용하여 정교한 SPA(단일 페이지 응용 프로그램 : Single Page Application) 개발도 가능합니다.
참고 URL
https://kr.vuejs.org/v2/guide/index.html
Vue.j 사용 시 장점 - 메리트
1. 부담없는 사용 방법 : Vue.js는 jQuery 처럼 script 태그 한 줄만으로 기능을 실행할 수 있습니다.
2. DOM 조작은 자동으로(쉽다는 뜻) : HTML 도큐멘트의 요소 구성을 DOM(Document Object Model)이라고 합니다. Vue.js는 HTML 요소와 JavaScript의 값, 이벤트 대응을 자동으로 수행해 줍니다. 그래서 jQuery 보다 간결하고 짧은 코드로 더 쉽게 코딩할 수 있습니다.
3. 배우기 쉽다 : Angular와 React에 비해 프레임워크 규모가 작은만큼, 배워야할 양도 적습니다. JavaScript와 jQuery 기초 지식이 있으면, 공부를 몇 시간만 해도 개발을 시작할 수 있습니다.
Vue.js에서 현재시간 가져오기
전체 구성을 먼저 소개합니다. 아래는 전체 소스 코드입니다.
<!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>
<div id="app">
<p>{{ now }}</p>
<button v-on:click="time">현재시간</button> <!-- v-on:event -->
</div>
<!-- Vue.js 설치 (인스톨) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 여기서 부터 Vue js 코딩 시작 -->
<script>
let app = new Vue({
el: "#app",
data:{
now: "00:00:00"
},
methods: {
time: function(e){ function(e)
var date = new Date();
this.now = date.getHours() + ":"
+ date.getMinutes() + ":" +
date.getSeconds();
}
}
});
</script>
</body>
</html>
예제 실행 화면
이제, 소스 코드를 한줄씩 설명합니다.
<div id="app">
<p>{{ now }}</p>
<!-- v-on:event -->
<button v-on:click="time">현재시각</button>
</div>
우선 HTML입니다.
{{ }}
이 안에 적은 소스가 JavaScript 메시지로 자동 치환됩니다.
v-on
v-on 지시문은 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다. (원하는 곳에서 이벤트를 실행할 수 있다는 의미)
출처 URL
https://kr.vuejs.org/v2/guide/events.html
다음은 Vue.js 주석 다음줄, script 다음을 설명합니다.
let app = new Vue({
el: "#app", //el: "ID 요소"를 얻음
data:{
// 여기에서 HTML {{ }} 을 치환
},
})
다음은 method 부분입니다.
let app = new Vue({
el: "#app",
data:{
now: "00:00:00" //now: == {{}}
},
methods: {
//function(e) 인수 e는 event의 e
time: function(e){
//new 연산자 오브젝트의 인스턴스 생성
let date = new Date();
// 현재 시간 얻기
// 아래는 자바스크립트 소스 코드
this.now = date.getHours() + ":"
+ date.getMinutes() + ":" +
date.getSeconds();
}
}
});
버튼을 누르기 전
어떤가요?
Vue.js 클릭 이벤트를 이용해 현재 시간을 확인했나요?
저도 지금 공부중인데, 코딩 자체는 매우 쉽고 직관적입니다.
