잡다한 프로그래밍

1. 사용방법

사용방법으로는 npm, cli, script 같은 방법이 있지만, Vue에 기본적인 부분을 학습하기 위해 다음과 같은 jsfiddle를 통해 기초를 학습한다.

https://jsfiddle.net/chrisvfritz/50wL7mdz/

2. Hello Vue 띄우기

html

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

javascript

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

다음과 같이 작성할 경우 Hello View! 를 확인할 수 있다. 만약 console창에서 다음과 같이 app.message = 'change vue!'를 입력하면 p태그 내부가 change vue! 로 바뀌는 것을 확인할 수 있다.

3. 조건문 & 반복문

if문을 사용하기 위해 v-if를 사용한다.

html

<div id="app">
  <p v-if="seen">보이는 상태</p>
</div>

javascript

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

다음과 같이 작성할 경우 P태그가 보이는것을 확인할 수 있다. 만약 console창에서 다음과 같이 app.seen = false를 입력하면 p태그가 사라지는것을 확인할 수 있다.

for문을 사용하기 위해 v-for를 사용한다

html

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

javascript

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '1번' },
      { text: '2번' },
      { text: '3번' }
    ]
  }
})

다음과 같이 작성할경우 3가지 li가 보이는 것을 확인할 수 있다. 만약 console창에서 다음과 같이 app.todos.push({ text: '4번'})을 입력하면 li태그가 새롭게 추가되는 것을 확인할 수 있다.