---
tags: vue
---

# Vue introduction

## 선언적 렌더링

- **디렉티브** : `v-bind`

`v-bind` 속성을 디렉티브라고 한다.

Vue에서 제공하는 특수 속성임을 나타내기 위해 `v-` 접두사가 붙어있있다.

이는 **렌더링된 DOM에 특수한 반응형 동작**을 한다.

	<div id="app2">
      <span v-bind:title="title">
        내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
      </span>
    </div>

	var app2 = new Vue({
	  el: '#app-2',
	  data: {
		message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
	  }
	})

## 조건문과 반복문

**DOM 구조에도 데이터를 바인딩할 수 있다.**
Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있다.

- 조건문 : `v-if`

	<div id="app3">
	  <p v-if="seenStatus">보이기!</p>
	</div>

	const app3 = new Vue({
	  el: "#app3",
	  data: {
		seenStatus: true,
	  },
	});

- 반복문 : `v-for`

	<div id="app4">
	  <ol>
		<li v-for="todo in todos">{{todo.text}}</li>
	  </ol>
	</div>

	const app4 = new Vue({
	  el: "#app4",
	  data: {
		todos: [{ text: "1" }, { text: "2" }, { text: "3" }],
	  },
	});

## 사용자 입력 핸들링

- 이벤트 리스너 추가 : `v-on`

- 사용자가 앱과 상효작용할 수 있게 한다.
- Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가할 수 있다.
- DOM을 직접 건들이지 않고, 앱의 상태만을 업데이트 한다. -> 리액트의 VDOM과 같은 개념인가?
- 모든 DOM 조작은 Vue에 의해 처리된다.

	<div id="app5">
	  <p>{{message}}</p>
	  <button v-on:click="reverseMessage">메시지 뒤집기</button>
	</div>

	const app5 = new Vue({
	  el: "#app5",
	  data: {
		message: "안녕 잘가",
	  },
	  methods: {
		reverseMessage: function () {
		  this.message = this.message.split("").reverse().join("");
		},
	  },
	});

- 입력과 앱 상태의 양방향 바인딩 : `v-model`

- 양식에 대한 입력과 앱의 상태를 양방향으로 바인딩한다.

    <div id="app6">
      <p>{{ message }}</p>
      <input v-model="message" />
    </div>

    const app6 = new Vue({
      el: "#app6",
      data: {
        message: "입력하세용",
      },
    });

## 컴포넌트를 사용한 작성방법

***Vue에서 컴포넌트***는 **미리 정의된 옵션을 가진 Vue 인스턴스**이다.

- Vue에서 컴포넌트 등록하는 방법

props로 todo를 등록한다. props는 부모가 자식 컴포넌트에게 데이터를 넘겨줄 수 있게 된다. todo를 컴포넌트 `v-bind` 로 연결한다.

    <div id="app-7">
      <ol>
        <!--
          Now we provide each todo-item with the todo object
          it's representing, so that its content can be dynamic.
          We also need to provide each component with a "key",
          which will be explained later.
        -->
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>

    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, text: 'Vegetables' },
          { id: 1, text: 'Cheese' },
          { id: 2, text: 'Whatever else humans are supposed to eat' }
        ]
      }
    })