1. Vue.js란 : 자바스크립트 프레임워크 중 하나입니다.
▷ Vue.js : 데이터와 뷰를 연결해주는 역할
◎ 프레임워크 : 복잡한 내용을 간단히 미리 규격화/모듈화 해둔 도구
▷ 프레임워크 사용시 : 기존 자바 스크립트에서 사용할 수 없던 문법이나 입력 방식들을 사용할 수 있게 되고,
타 플러그인을 통해 UI 컴포넌트나 스타일, 추가 기능 등을 불러 사용하는 것도 가능해집니다.
▷ 자바스크립트 프레임워크 종류 : Vue/React/Angular
▷ SPA(Single Page Application)은 한 페이지에서 모든 컨텐츠를 보여주는 웹사이트입니다.
▷ 이때, 동적인 페이지를 쉽게 만들어주는 기술이 Vue.js입니다. jQuery보다 간단합니다.
▷ 아래의 홈페이지는 Vue.js를 통한 예제 코드를 볼 수있는 페이지입니다.
궁금하신 분들은 들어가서 Vue.js에서 예제(문서 Ｖ → 예제)를 통해 어떻게 구현할 수 있는지 참고하세요~
Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs-korea.org)
Vue.js - The Progressive JavaScript Framework | Vue.js
접근성 HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다.
v3-docs.vuejs-korea.org
◎ Vue.js는 데이터와 표시되는 요소(HTML 요소 등)을 연결해 주는 역할입니다.
▷ 주로 MVVM(Model View ViewMode1) 구조를 사용합니다.
▷ 데이터는 무엇인가? (Model) : 웹 페이지에서 바뀌는 부분이 어디인지?
▷ 표시되는 요소는 무엇인가? (View) : HTML의 어느 부분에서 어떤 형식으로 표시되는가?
▷ 어떤식으로 연결되는가? (ViewModel) : HTML의 어디가 조작될 때 데이터가 어떤 형식으로 변화되는가?
◎ Vue.js 작성 방법 : 데이터를 만들고, 표시하는 요소를 준비한 후 연결합니다.
◎ Vue.js 주요 기능
| No | 기능 | 서식 |
| 1 | { {데이터} } | 데이터를 있는 그대로 표시 |
| 2 | v-bind | 요소의 속성을 데이터로 지정 |
| 3 | v-model | 입력폼과 데이터의 연결 |
| 4 | v-on | 이벤트 연결 |
| 5 | v-if | 조건에 따라 표시 |
| 6 | v-for | 반복해서 표시 |
| 7 | computed | 데이터를 사용한 계산 |
| 8 | watch | 데이터의 변화 감시 |
| 9 | transition | 표시/비표시에 애니메이션 처리 |
| 10 | component | 컴포넌트 조립 |
CDN을 적용해 Vue를 따로 설치하지 않고 HTML에 한줄을 추가하면 Vue를 사용할 수 있게 만들어줍니다.
아래의 코드 한 줄만 추가하면 Vue를 사용할 수 있습니다.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
아래의 주소는 해당 코드가 사용가능한 최신버전의 Vue로 적용될 수 있도록 만듭니다.
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
예제1) 클릭한 횟수를 표시하는 버튼(카운트 업을 누르면 1증가, 카운트 다운을 누르면 1감소)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css"
<!-- CDN 연결 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- https://cdn.jsdelivr.net/npm/vue/dist/vue.js -->
<!-- 해당 코드가 사용가능한 최신버전의 vue로 적용됩니다.-->
</head>
<body>
<h2>클릭하면 카운터가 올라갑니다.</h2>
<div id="app">
<p>{{count}}회</p> <!-- {{ mustache }} mustache : 콧수염 -->
<button v-on:click="countUp">카운터 업</button>
<button v-on:click="countDown">카운터 다운</button>
</div>
<script>
new Vue({
el: "#app",
data: {
count:0
},
methods:{
countUp: function(){
this.count++;
},
countDown: function(){
this.count--;
}
}
})
</script>
</body>
</html>Vue.js를 사용하면 변수를 script 안에 넣지 않아도 됩니다.
'카운터 업'을 클릭하면 숫자가 올라가고 '카운터 다운'을 클릭하면 숫자가 내려갑니다.
기존에 배웠던 java script나 java와 코드 사용방법이 달라서 머릿속이 좀 복잡하네요,,
그래도 매일 블로그 작성하면서 스스로 정리하고 모두 제 것이 되도록 해봐야겠어요!!!!!!!!!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 속성(v-bind, a, class) (0) | 2022.12.22 |
|---|---|
| [java script] Vue.js 입문 데이터 표시(new Vue, v-text, v-html) (0) | 2022.12.21 |
| [java script] DOM 노드 추가, 삭제 연습 문제 (0) | 2022.12.20 |
| [java script] DOM에서 노드 추가, 삭제하기 (0) | 2022.12.20 |
| [java script] 구구단 출력하기 예시 (0) | 2022.12.19 |
