1. Vue가 뭔지 + 왜 사용하는지
Vue란?
Vue.js는 웹 페이지 화면을 개발하기 위한 프레임워크입니다.
근데 이걸 왜 react, angular와 비교해서 3 대장으로 놓냐?
- 주 문법이 자바스크립트와 많이 다르지 않아서 접근성이 react와 angular에 비해서 높다.
- 가볍고 성능이 빠르다
- React의 virtual DOM, Angular의 data Binding의 장점을 갖고 있습니다.
virtual DOM이란?
virtual DOM은 실제돔에서 처리를 하는게 아니라, 가상 돔과 메모리에서 미리 처리를 한 후 실제 DOM에 반영이 되는 것이다.
data Binding이란?
바인딩(Binding)이란 묶는다는 의미로, 웹 프로그래밍에서는 UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해 주는 프로세스를 의미한다.
2. Vue 설치하기
npm install vue
근데 나는 vite를 사용하여서 초기세팅했다.
$ npm create vite@latest
$ yarn create vite
3. Vue 사용해보기
일단 사용해 보기 전에 알아야 할 문법 사항들이 있는데
1. 데이터 바인딩 사용하는 법 (텍스트 보간법)
텍스트 보간법은 주로 {{ }} 콧수염괄호를 사용한다.
뷰 인스턴스에서 정의한 것을 데이터바인딩을 통해 보여주기
<div>{{ text }}</div>
new Vue({
data: {
text: 'Hello World';
}
})
2. 디렉티브
자주 쓰는 문법들만 정리해 봤습니다!
| v-text | js innetText |
| v-html | js innerHTML |
| v-if | 조건부 렌더 |
| v-else | " " |
| v-else-if | " " |
| v-for | 데이터 개수만큼 반복 |
| v-bind | 동적으로 엘리먼트 속성 설정 |
| v-model | input 값 구하기 |
이제 예제를 한번 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 데이터 바인딩과 디렉티브 예제</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<p v-if="message">당신이 입력한 메시지는: {{ message }}</p>
<p v-else>메시지를 입력하세요.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '' // 입력 필드와 바인딩되는 데이터
}
});
</script>
</body>
</html>
이 코드는 메시지를 input란에 입력했을 시에 p태그가 보이고, 입력이 되어있지 않다면 보이지 않는 코드입니다.
new Vue의 el은 어떤 태그에 이러한 코드를 시작할까를 알려주는 것이라고 보면 됩니다.
아래의 data는 div id="app"에 명시돼있는 input란 안에 v-model로 구해진 input값을 data: { message }를 통해 사용자가
입력한 메시지를 보여줍니다.