🔻 Vue.js란?
-
Vue.js는 전 게시물에서 언급한 것처럼 학습하기 쉬운 편에 속하고 여러 프레임워크들의 장점만 모아둔 프레임워크다!!
-
기존 HTML 마크업 기반의 템플릿을 그대로 활용하며 CSS를 작성하는 스타일도 기존 문법을 그대로 따른다는 장점이 있다.
-
우수한 확장성도 빼놓을 수 없는 큰 장점 중 하나다. React와는 다르게, 제이쿼리(jQuery)처럼 스크립트 태그로 CDN(Content Delivery Network)을 추가할 수 있고 프로그램에 따라 점진적으로 라이브러리를 채택할 수 있다.
설명 출처 : https://www.samsungsds.com/kr/insights/vue_js_3.html
❗❕❗ 2022년 02월 07일부터 기본 Vue.js 라이브러리가 Vue 3.0으로 업데이트 되었다.
따라서, 기존 Vue 2.x 이랑 Vue 3.0 사용법은 차이점이 있으니 이 점 유의하기 바랄 것!!
Vue.js 3.0 라이브러리 Document 👉 https://vuejs.org/
영어 울렁증이 있으신 분들을 위한 Vue.js 한국어 버전 Document 👉 https://kr.vuejs.org/
!!! 위 한글 문서 버전은Vue 2.x이다.
💚 Vue.js 튜토리얼 입문
-
vue 프로젝트 폴더를 만든다. cmd창에서 진행하면 훨씬 간편
code .명령어는 cmd창에서 vscode를 바로 실행시킬 때 사용하는 명령어
-
index.html파일을 만들고 vue.js 설치 방법 중 하나인 CDN링크를 가져와서 Head 태그 내부에 복사 붙여넣기 한다. -
body태그 내부에 script를 만들고 app이라는 변수에 Vue 생성자를 만들어준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>VUE Intro</title>
</head>
<body>
<div id="app">
<h1>Hello Vue!!</h1>
</div>
<script>
const app = new Vue({
el: "#app"
})
</script>
</body>
</html>-
그 후, property안에
el이라는 element를 생성한다. -
Vue는 SPA방식으로 작동하기 때문에 최상위 div태그 안에 모든 내용이 담기게 된다. 따라서, 최상위 div태그 안에
app이라는 id를 부여한다. -
그렇게 하고, element에
"#app"아이디를 부여해서 div태그와 연결해준다. -
위 과정을 다 마치면,
div태그 내부에Vue스크립트를 작성할 준비가 완료되었다.
💚 Vue의 간단하고 다양한 기능 알아보기
-
dataProperty : 변수나 데이터들을 관리할 때, 해당 프로퍼티 안에 작성함.-
본래, 함수 형태로 리턴하는 것이 권장된다.
-
JavaScript의 DOM 접근법을 통해 innerText로 접근하는 방식과 유사함
-
실행 화면 :
-
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>VUE Intro</title>
</head>
<body>
<div id="app">
<h1>Hello {{ name }}</h1>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "scalper",
}
})
</script>
</body>
</html>-
data 안에 리스트 형태로 배열을 표현해 보기 :
-
ul마크업을 이용해서<li>내부에 반복문으로 작성한다. -
li태그 내에v-for메소드를 부여한다. -
결과 화면 :
-
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>VUE Intro</title>
</head>
<body>
<div id="app">
<h1>Hello {{ name }}</h1>
<ul>
<li v-for="framework in frameworks">{{ framework }}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "scalper",
frameworks: ["React", "Vue", "Angular"]
}
})
</script>
</body>
</html>-
input태그에v-model을 이용해서 data를 연결시키기- 여기서 끝나는 것이 아니라, 실시간으로 데이터가 바인딩이 되었기 때문에
input내부에 값을 지웠을 때 바인딩에 연결된data도 같이 변경되는 것을 볼 수 있다.
- 여기서 끝나는 것이 아니라, 실시간으로 데이터가 바인딩이 되었기 때문에
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>VUE Intro</title>
</head>
<body>
<div id="app">
<h1>Hello {{ name }}</h1>
<input type="text" v-model="name">
<ul>
<li v-for="framework in frameworks">{{ framework }}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "scalper",
frameworks: ["React", "Vue", "Angular"]
}
})
</script>
</body>
</html>