[Javascript/Vue] Vue.js 프레임워크 입문

학교에서 '소프트웨어공학' 수업을 듣고 있는데, 이 수업에선 전체 개발 프로세스(요구사항 정의 및 분석 -> 설계 -> 코딩 -> 테스트 -> 유지보수)를 실습해보기 위해 간단한 팀 프로젝트를 진행한다. 그래서 간단한 대시보드를 만들어야하는데, 대시보드를 싱글 페이지로 만들면 좋을 것 같고, 또 예전부터 Vue.js를 한 번 사용해보고 싶었기 때문에 틈틈이 Vue.js에 대한 정리를 해보려 한다. (시간 안에 배워서 만들 수 있으려나...)

---

공식 사이트에 너~무 정리가 잘되어 있다.

https://kr.vuejs.org/v2/guide/index.html

 

일단, Vue.js를 사용하기 위해 CDN을 사용하자

<!-- 도움되는 콘솔 경고를 포함한 개발 버전 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

렌더링

Vue.js의 장점 중 하나는 간단한 템플릿 구문을 통해 DOM에 데이터를 렌더링할 수 있다는 것.

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

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

 

또는 엘리먼트 속성의 값을 동적으로 바인딩할 수도 있다.

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

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

 

위의 span 태그에 'v-bind' 속성이 있는데 'v-' 접두어로 시작하는 속성은 Vue.js에서 제공하는 속성이다.

 

조건문과 반복문

Vue.js에선 조건문을 위해 v-if 속성을 제공한다.

<div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

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

 

반복문을 위해 v-for 속성을 제공한다.

이 속성을 통해 배열의 데이터를 가지고 작업을 하면 된다. (항목 목록 만들기 등..) 

<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: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})