[Vue] Vue.js 기초와 Template

1.보간법

1.1 MVVM(Model-View-ViewModel)

• Vue는 MVVM 아키텍처 기반으로 동작
• View: HTML 템플릿
• ViewModel: Vue 인스턴스 (상태 & 로직)
• Model: 실제 데이터

✅ `data()`의 리턴 객체는 Vue 내부에서 Proxy 객체로 감싸짐 → 데이터 접근 및 변경 감지 가능

 

1.2 보간법(Mustache)

• 템플릿 내에서 `{{ 변수명 }}`으로 데이터를 출력

<h1> {{ message }} </h1>

• 해당 변수는 JavaScript 표현식으로 간주 (문자열 아님)

✅ 핵심 요점 정리

항목	설명
MVVM	View, ViewModel, Model로 구성
Proxy	데이터 감지 및 바인딩 핵심
보간법	`{{ message }}` → 데이터 바인딩 표현식

---

2. 기본 디렉티브

• v-로 시작하는 속성
• HTML 요소와 관련된 작업 지정

2.1`v-text` / `v-html`

디렉티브	역할	예시
`v-text`	요소의 `textContent` 설정	`<h2 v-text="message"></h2>`
`v-html`	요소의 `innerHTML` 설정	`<div v-html="rawHTML"></div>`

✅ `v-text`는 HTML 태그를 출력하지 않고 문자로 처리
✅ `v-html`은 HTML 태그로 해석

✅ message는 문자열 아니고 변수로 봄 (즉, js표현식)

 

2.2 `v-bind` (속성 바인딩)

• 속성을 Vue 데이터와 바인딩

<img v-bind:src="imgUrl">
<!-- 축약형 -->
<img :src="imgUrl">

 

✅ 특징

• 단방향 바인딩 (ViewModel → View)
• UI에서 변경해도 ViewModel에는 영향 없음
• 화면의 값은 뷰에 반영 X , 뷰 모델의 값은 화면에 반영 → 단방향

 

✅ 핵심 요점 정리

디렉티브	설명
`v-text`	텍스트 출력
`v-html`	HTML 포함 출력
`v-bind` / `:`	속성 바인딩 (단방향)

---

3. `v-model` 디렉티브 (양방향 바인딩)

3.1 양방향 바인딩 구조

• ViewModel의 속성과 UI 요소 간 값이 상호 동기화
• Vue 속성값 변경시 → UI 변경
• UI 입력값 변경시 → 속성값 변경

<div id="app">
  <input type="text" v-model="name">
  <br/>
  입력한 값: <span>{{name}}</span>
 </div>
 
 <script src="https://unpkg.com/vue"></script>
 <script>
   let vm = Vue.createApp({
     name: "App",
     data() {
       return { name: ''};
     }
   }).mount('#app');
</script>

 

3.2 주로 사용되는 Form 요소

• `input`, `textarea`, `select`, `checkbox`, `radio` 등

 

3.3 Checkbox의  v-model 바인딩

• 다중 선택 시 → 배열 속성에 바인딩
• 단일 선택 시 → 단일 속성에 바인딩 (디폴트 값: true/false)

<div id="app">
  위의 내용에 동의하십니까?
  <input type="checkbox" v-model="agree" true-value="yes" false-value="no">
  <hr/>
  
  <span>선택된 값 : {{agree}}</span>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  let vm = Vue.createApp({
    name: "App",
    data() {
      return {
        agree: 'no'
      };
    }
  }).mount('#app');
</script>

 

3.4 수식어 (Modifier)

• v-model 디렉티브에 특별한 기능을 추가

수식어	설명
`.lazy`	입력 후 포커스 이동 시 반영
`.number`	숫자로 자동 변환 (12abc -> 12 출력)
`.trim`	앞뒤 공백 제거

<input v-model.lazy="name">
<input v-model.number="age">
<input v-model.trim="comment">

 

 

3.5 한글 입력 지연 이슈 → @input 사용

• 값을 받아내는 시점이 한글 한 글자가 입력이 완료될 때 처리
• 해결방법
  • v-model을 사용하지 않음
  • v-bind를 이용해서 바인딩
  • 입력 이벤트가 발생했을 떄 이벤트 핸들러에서 속성 데이터에 반영

<div id="app">
  <input type="text" :value="name" @input="changeName"/>
</div>
 

methods: {
  changeName(e) {
    this.name = e.target.value;
  }
}

❌ 화살표 함수 사용 시 `this`가 Vue 인스턴스를 가리키지 않으므로 주의

 

✅ 핵심 요점 정리

항목	설명
`v-model`	양방향 바인딩
사용 위치	Form 요소 전용
수식어	`.lazy`, `.number`, `.trim`
한글 처리	`@input` + 일반 함수 사용

---

4. 조건 렌더링 디렉티브

4.1 `v-show` vs `v-if`

디렉티브	특징	동작 방식
`v-show`	단순히 보이기/숨기기	`display: none` 제어
`v-if`	조건에 따라 DOM 생성/삭제	렌더링 자체가 변경됨

<img v-show="amount < 0" src="warning.png">
<img v-if="amount < 0" src="warning.png">

 

4.2 `v-else`, `v-else-if`

<p v-if="score >= 90">A</p>
<p v-else-if="score >= 80">B</p>
<p v-else>C 이하</p>

 

✅ 타입 주의

• 입력값이 문자열이라도 `100 < 0` → JS가 자동으로 숫자로 변환하여 비교 가능

✅ 핵심 요점 정리

디렉티브	특징
`v-show`	display 조절 (DOM은 유지)
`v-if`	조건에 따라 DOM 생성/삭제
`v-else`	조건 미충족 시 처리
`v-else-if`	조건 분기 처리 가능

---

5. 반복 렌더링 디렉티브

• 반복적인 데이터를 랜더링

 <태그명 v-for="변수in 배열"  :key="id값">

 

5.1 배열 반복

<tr v-for="contact in contacts" :key="contact.no">
  <td>{{ contact.no }}</td>
  <td>{{ contact.name }}</td>
</tr>

contacts: [
  { no: 1, name: "RM" },
  { no: 2, name: "제이홉" }
]​

 

5.2 객체 반복

<div v-for="(value, key) in userInfo" :key="key">
  {{ key }}: {{ value }}
</div>

 

5.3 index 

// 형식(배열 사용시)
<태그명 v-for="(contact, index) in contacts"  …>

// 형식(객체 사용시)
<태그명 v-for="(val, key, index) in regions" …>

<tr v-for="(contact, index) in contacts" :key="contact.no">
  <td>{{ index + 1 }}</td>
  <td>{{ contact.name }}</td>
</tr>

 

5.4 `:key` 속성의 중요성

• 배열 렌더링 시 `:key`가 없으면 Vue가 항상 전체 요소를 다시 그림
• `:key`를 지정하면 변경된 요소만 효율적으로 업데이트

상황	결과
[A, B, C] → [A', B, C]	A만 다시 렌더링
[A, B, C] → [B, A, C]	순서만 변경
[A, B, C] → [D, A, B, C]	D만 추가 렌더링

 

✅ 핵심 요점 정리

항목	설명
`v-for`	배열·객체 반복 렌더링
`:key`	각 항목을 고유하게 식별

---

6. 데이터 변경 시 주의 사항

6.1 Proxy 객체

• 데이터의 변경사항 감시, 값 변경 시 렌더링 다시 유도
• Vue 인스턴스의 data옵션으로 지정한 객체
• data로 지정된 객체는 모두 proxy로 래핑
•  

<script src="https://unpkg.com/vue"></script>
<script>
  let = model = {
    contacts: [
      { no: 1011, name: "RM", tel: "010-3456-8299" },
      { no: 1012, name: "정국", tel: "010-3456-8298" },
      { no: 1013, name: "제이홉", tel: "010-3456-8297" },
 	  { no: 1014, name: "슈가", tel: "010-3456-8296" },
    ],
  };
  let vm = Vue.createApp({
    name: "App",
 	data() {
      return model;
 	},
  }).mount("#app");
 </script>
</body>

 

• 배열의 데이터를 변경하는 메서드들도 래핑돼 있음
• `push()`, `splice()`, `sort()` 등
• -> 배열의 내용 변경 시 watcher에게 변경을 알려서 다시 랜더링 발생

---

📎 참고자료

• Vue.js 템플릿 문서
• Vue 공식 디렉티브 목록
• 원쌤의 Vue.js 퀵스타트 (원형섭 저)