Vue.js 맛보기

Vue.js

Installation

• IE 8를 지원하지 않는다.

<script>를 이용하는 방법

• 개발시에는 Production 버전이 아닌 Development 버전을 쓰는 것이 좋다. Production 버전에서는 Warnning이 나오지 않는다.

CDN

• https://unpkg.com/vue
• CDN를 이용한다면 최신버전의 Vue.js를 사용할수 있다.

npm

npm install vue

cli

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

선언적 렌더링 (Declarative-Rendering)

<div id="app" v-bind:style="style">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    style: "font-size:30px;"
  }
})

• 모든 데이터는 DOM에 바인딩(binding)에 되어있다. app.message를 변경하면 다시 래더링한다.
• v-bind는 지시(directive)이라고 한다.
  • attribute의 속성에 대해 data를 바인딩(binding)한다.
  • 위와 같은 예제에서는 style이 변경이 되서, font-size가 30px로 변경이 된다.

조건문과 반복문

• 조건문

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

• 반복문

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

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

input 처리

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

• v-on 지시자(directive)를 이용하여 Event를 처리 할수 있다.

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

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

• v-model 지시자(directive)를 이용하여 input 데이터를 바인딩(binding) 할수 있다.

컴포넌트로 구성하기

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

• 위와 같이 정의를 컴포넌트를 정의를 하면 아래와 같이 다른 컴포넌트 구성할때 사용을 할수가 있다.

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

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

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>