[Vue] 5. Vue.js 기초 시작하기

in Devlog on Vue



Vue.js 기초 시작하기

10. Vue.js 기초 시작하기

ES5 방식과 빌드 도구를 이용한 싱글파일컴포넌트 방식으로 Vue.js 기본 문법들을 연습할 수 있다.

10-1. ES5 방식

Vue.js를 간단하게 시작해볼 수 있는 방법은 cdn형태로 vue.js를 import한 index.html 파일에서 연습하는 것이다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>


ES5 방식

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

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



싱글파일컴포넌트 방식

<template>
  <div>
    { { message } }
  </div>
</template>

<script>
export default {
  name: 'VueRendering',
  data() {
    return {
      message:
        '안녕하세요 Vue!'
    };
  }
};
</script>



10-2. 싱글파일컴포넌트 방식

vue-cli로 만든 프로젝트에서 VueBasic.vue과 VueRendering.vue파일을 만들고 라우터역할을 하는 index.js파일을 수정하면 싱글파일컴포넌트 방식으로 연습할 수 있다.

components/VueBasic.vue

<template>
  <div class="hello">
    <h1>{ { msg } }</h1>
    <h2>맛보기</h2>
    <ul>
      <!-- router 이동-->
      <li>
        <router-link to="/VueRendering">1. Vue 렌더링</router-link>
      </li>
      <li>
        <router-link to="/VueFor">2. Vue For문</router-link>
      </li>
      <li>
        <router-link to="/VueHandling">3. 사용자 입력 핸들링</router-link>
      </li>
      <li>
        <router-link to="/VueCompMain">4. 컴포넌트 사용</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'VueBasic',
  data() {
    return {
      msg: 'Vue 기본 문법 맛보기'
    };
  }
};
</script>



components/VueRendering.vue

<template>
  <div>
    { { message } }
  </div>
</template>

<script>
export default {
  name: 'VueRendering',
  data() {
    return {
      message:
        '안녕하세요 Vue!'
    };
  }
};
</script>



router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import VueBasic from '@/components/VueBasic';
import VueRendering from '@/components/VueRendering';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'VueBasic',
      component: VueBasic
    },
    {
      path: '/VueRendering',
      name: 'VueRendering',
      component: VueRendering
    }
  ]
});


기본 문법 예제는 다른 블로그나 책에 많이 있기에 싱글파일컴포넌트에서 연습하는 방법까지만 포스팅을 하겠습니다.
vue-cli 기반으로 생성한 위의 싱글파일컴포넌트 방식 샘플이다.

다음 포스팅에서는 TODO-LIST를 만드는 것을 진행하겠습니다.

참고