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' }
  ​​​​    ]
  ​​​​  }
  ​​​​})