오늘은 간단히 Vue.js를 이용해서
웹에 데이터를 출력해보겠다.
오늘의 미션
"Hello 동그리!!" , "Vue JS~_~"
출력하기
그전에
Vue.js 에 대해 간단히 정리하고 넘어가자.
Vue.js의 정의
* 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크
* 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스
* UI를 빠르게 개발하기 위해서 만든 자바스크립트 프레임워크
출처 : https://ko.wikipedia.org/wiki/Vue.js
Vue.js의 장점
* 가상 DOM 을 지원하여 빠른 UI렌더링이 가능
* 다른 자바스크립트 프레임워크와 달리 유연하고 가벼움
* React와 Angular의 장점을 가진 Vue.js
Vue는 Angular의 양방향 데이터 바인딩과, React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다.
양방향 데이터 바인딩이란? 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다.
단방향 데이터 바인딩이란? 컴포넌트 단방향 통신을 의미하는데 컴포넌트 간 데이터를 전달할 때 항상 상위컴포넌트에서 하위 컴포넌트 방향으로 전달하게끔 구조화 되어 있는 것을 의미한다.
출처 : https://mkil.tistory.com/435
> 가상 DOM 에 대한 부분이 궁금하다면? https://velog.io/@surim014/Vue.js-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-1-%EC%A0%95%EC%9D%98-%ED%8A%B9%EC%A7%95%EC%9E%A5%EB%8B%A8%EC%A0%90
실습해보기
먼저, 뷰를 사용하기 위해선, 자바스크립트에서 링크를 연결한 것과 같이
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js">
<script src="https://unpkg.com/axios/dist/axios.min.js">
위와 같이 링크를 연결해줘야 한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
</div>
<div id="app2">
<div>{{message2}}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'Hello 동그리!!'
}
})
new Vue({
el:'#app2',
data:{
message2:'Vue JS~_~'
}
})
</script>
</body>
</html>
정확한 이유는 모르겠지만, jQuery는 상단 <head>태그에서 사용했는데
Vue.js는 <body>태그 중에서도 하단에 작성한다.
1.
new Vue로 인스턴스를 생성한다.
el은 인스턴스가 적용되는 범위이다. (인스턴스가 그려지는 화면의 시작점)
data는 뷰가 반영되는 속성이다.
2.
뷰를 통해 데이터를 출력하기 위해서는 양쪽에 {{ }} 괄호를 넣어주면 된다.
( {{}} 모양이 콧수염을 닮았다고 해서 콧수염 표현식(Mustache Expression)이라고도 한다.)
위의 실습처럼 {{message}} , {{message2}} 같이 표기해주면 HTML DOM에 데이터가 렌더링 된다.
3. 출력
