Vue.js란?
웹 개발을 쉽게할 수 있도록 도와주는 프론트엔드 프레임워크
프론트엔드란?
[프로그래밍] 프론트엔드와 백엔드란?
프론트엔드 - 사용자에게 나타나는 부분 ( UI, GUI ... ) 백엔드 - 사용자에게 보이지 않는 부분 ( DB, API ... )
defineall.tistory.com
프레임워크란?
[프로그래밍] 라이브러리, 모듈과 프레임워크란?
라이브러리 = 모듈 프로그래밍 언어(코드)에서, 자주사용하는 기능을 함수나 클래스로 묶어서 [쉽게 재사용할 수 있게 만들어 놓은 파일]을 라이브러리라고 한다. 프레임워크 프로그래밍 언어(
defineall.tistory.com
Vue.js의 필요성
기존 웹 개발자뿐만 아니라, 웹 개발 입문자들도 쉽게 배울 수 있다.
React, Angular보다 빠르다.
Angular의 바인딩 특성과, React의 가상 돔 렌더링 특징을 모두가 지고 있다.
데이터 바인딩 : 뷰(View)에 표시되는 내용을 모델(Model)의 데이터로 바꿔주는 것
돔 (DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너 (DOM Listener) : 돔의 변경을 감지하여, 그에 따른 작업을 실행해주는 프로그램
Vue.js의 기본 사용법
<!-- html -->
<div id="app">
<!-- 중괄호 두번{{}} 사용해서, Vue.js파일에 선언된 변수 가져오기 -->
{{ message }}
</div>// cdn으로 Vue.js 불러오기
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>// javascript에서 Vue.js 사용하기
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});// 출력 결과
Hello Vue.js!
Vue의 특징
1. MVVM 구조(패턴)를 사용한다.
MVVM 구조(패턴) : 데이터 관리하는 것(Model), 화면을 표시하는 것(View), 데이터와 화면을 연결해 주는 것 (View Model)
2. 컴포넌트를 사용한다.
웹페이지를 변경하기 쉽도록, 화면을 여러 부분으로 나누어 부품처럼 관리하는데,
이때 나누어진 하나의 부품을 컴포넌트라고 부른다.
Vue.js 사용법
<!-- index.html -->
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
// id가, app인 element를 사용하겠다.
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
Vue 개발자 도구 설치 및 사용 방법
Chrome Vue 개발자 도구 ( Vue로 만들어진 웹페이지를 감지해준다. )
Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
chrome.google.com
Vue파일을 크롬 브라우저에 직접 끌어다 쓰기 위한 설정해주기
1. 확장 프로그램 관리 들어가기
2. 파일 감지가능하도록 설정하기
3. 감지된 결과
4. 개발자 도구 (F11)
Vue에서 컴포넌트 사용하기
<html>
<head>
<title>Vue Component Scope</title>
</head>
<body>
<div id="app">
<my-component1></my-component1>
<my-component2></my-component2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
// 첫 번째 컴포넌트 내용
var cmp1 = {
template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>',
data: function() {
return {
cmp1Data : 100
}
}
};
// 두 번째 컴포넌트 내용
var cmp2 = {
template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}</div>',
data: function() {
return {
cmp2Data : cmp1.data.cmp1Data
}
}
};
new Vue({
el: '#app',
// 지역 컴포넌트 등록
components: {
'my-component1': cmp1,
'my-component2': cmp2
}
});
</script>
</body>
</html>
반응형
