강의 대시보드 Vue 시작하기 - Vue 맛보기
Vue 시작하기 - Vue 맛보기
강의명 : [Vue.js입문~초급] Javascript 초보 Real 웹앱 개발 - 1부 : vue 개념 ~ 초급
수강 기한 : 무제한
진도율 : 0강/24강 (0%) | 시간 : 0분/284분
나가기
미수강
이전수업
다음수업

Vue 시작하기(Getting Started)

지금부터는 실제코딩을 하면서 Vue js 맛보기 실습을 해보겠습니다.

https://kr.vuejs.org/v2/guide/index.html#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[ 설치 ]

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

또는:

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

JSFiddle - https://jsfiddle.net/

선언적 렌더링

https://kr.vuejs.org/v2/guide/index.html#%EC%84%A0%EC%96%B8%EC%A0%81-%EB%A0%8C%EB%8D%94%EB%A7%81

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.

텍스트 보간(Interpolation) - 텍스트 삽입

<div id="app">
  <!-- 텍스트 보간 -->
  <p>{{ message }}</p>
</div>
new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!',
  },
});

이제 데이터와 DOM이 연결되었으며 반응형이 되었습니다.

엘리먼트 속성 바인딩

<div id="app">
  <!-- 엘리먼트 속성 바인딩 -->
  <span v-bind:title="nowMessage">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>
new Vue({
  el: '#app',
  data: {
    nowMessage: '이 페이지는' + new Date() + '에 로드 되었습니다.',
  },
});

이번에는 앞에서 나온 메세지리를 이벤트 핸들링을 통에서 컨트롤 해보겠습니다.

이벤트 핸들링

https://kr.vuejs.org/v2/guide/index.html#%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9E%85%EB%A0%A5-%ED%95%B8%EB%93%A4%EB%A7%81

<div id="app">
  <!-- 텍스트 보간 -->
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!',
  },
  methods: {
    // 이벤트 핸들링
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    },
  },
});

조건문과 반복문

https://kr.vuejs.org/v2/guide/index.html#%EC%A1%B0%EA%B1%B4%EB%AC%B8%EA%B3%BC-%EB%B0%98%EB%B3%B5%EB%AC%B8

엘리먼트가 표시되는지에 대한 여부를 제어

<div id="app">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
new Vue({
  el: '#app',
  data: {
    seen: true,
  },
});
<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' },
    ],
  },
});

버튼을 하나 추가하고, Todo 를 추가하는 메소드를 만들어서 확인해 봅시다. { text: 'New item' }를 추가힙니다.
Todo 목록에 새 항목이 동적으로 추가 된것을 볼 수 있습니다.

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
  <button v-on:click="addTodo">추가</button>
</div>
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' },
    ],
  },
  methods: {
    addTodo: function () {
      this.todos.push({ text: 'New item' });
    },
  },
});

사용자 입력 핸들링

https://kr.vuejs.org/v2/guide/index.html#%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9E%85%EB%A0%A5-%ED%95%B8%EB%93%A4%EB%A7%81

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message" />
</div>
new Vue({
  el: '#app-6',
  data: {
    message: '안녕하세요 Vue!',
  },
});

컴포넌트를 사용한 작성방법

https://kr.vuejs.org/v2/guide/index.html#%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EC%9E%91%EC%84%B1%EB%B0%A9%EB%B2%95

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다.
이는 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있게 해주는 추상적 개념입니다.
생각해보면 거의 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.

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

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
  <!-- 컴포넌트를 사용한 작성방법 -->
  <ol>
    <todo-item v-for="todo in todos" v-bind:todo="todo" v-bind:key="todo.id">
    </todo-item>
  </ol>
</div>

Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스 입니다.
Vue에서 컴포넌트를 등록하는 방법은 간단합니다.

// 컴포넌트를 사용한 작성방법
Vue.component('todo-item', {
  //template: '<li>할일 항목 하나입니다.</lie>'
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>',
});

new Vue({
  el: '#app',
  data: {
    todos: [
      { id: 0, text: 'Javascript 배우기' },
      { id: 1, text: 'Vue 배우기' },
      { id: 2, text: '무언가 멋진 것을 만들기' },
    ],
  },
});
    목차 커뮤니티