공식 라우터

대부분의 단일 페이지 애플리케이션의 경우 공식적으로 지원되는 vue-router library를 사용하는 것이 좋습니다. 자세한 내용은 vue-router의 문서를 참조하십시오.

단순한 라우팅 시작하기

매우 단순한 라우팅만 필요하고 완전한 기능을 갖춘 라우터 라이브러리를 사용하지 않으려면 다음과 같이 페이지 수준 컴포넌트를 동적으로 렌더링하면됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

HTML5 History API와 결합하여 매우 기본적이지만 기능이 완벽한 클라이언트측 라우터를 구축할 수 있습니다. 이를 실제로 보려면 예제 앱을 확인하십시오.

Most of the tips below are enabled by default if you are using Vue CLI. This section is only relevant if you are using a custom build setup.

프로덕션 모드를 켜세요

개발 과정에서 Vue는 일반적인 오류 및 함정을 해결하는 데 도움이 되는 많은 경고를 제공합니다. 그러나 이러한 경고 문자열은 프로덕션에서는 쓸모 없으며 앱의 페이로드 크기를 키웁니다. 또한 이러한 경고 검사 중 일부는 프로덕션 모드에서 피할 수 있는 런타임 비용이 적습니다.

빌드 도구를 사용하지 않는 경우

전체 빌드를 사용하는 경우 (즉, 빌드 도구 없이 스크립트 태그를 통해 Vue를 직접 포함하는 경우) 프로덕션 환경을 위해 축소 버전(vue.min.js)을 사용해야합니다. 두가지 버전 모두 설치 안내

Vue CLI 는 Jest, 혹은 Mocha 를 사용해 어려운 설정 없이 유닛테스트를 진행하기 위한 옵션이 있습니다. 커스텀 셋업의 가이드가 되는 Vue Test Utils도 있습니다.

간단한 테스트하기

테스팅을 위한 코드 구성 측면에서, 특별히 추가로 해야할 작업이 없습니다. 원시 옵션들만 내보내면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>
  <span>{{ message }}</span>
</template>

<script>
  export default {
    data () {
      return {
        message: 'hello!'
      }
    },
    created () {
      this.message = 'bye!'
    }
  }
</script>

Vue CLI 는 TypeScript 툴링 지원을 포함하여 제공됩니다.

NPM 패키지 공식 선언

A static type system can help prevent many potential runtime errors, especially as applications grow. That’s why Vue ships with official type declarations for TypeScript - not only in Vue core, but also for vue-router and vuex as well.

Since these are published on NPM, and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don’t need any additional tooling to use TypeScript with Vue.

소개

이것은 특정 뷰를 향상시키는 용도로만 사용되는 중소 규모 프로젝트에서 유용합니다. 하지만 좀 더 복잡한 프로젝트의 경우 또는 프론트엔드가 JavaScript 기반인 경우 단점이 분명해집니다.

Vue는 텍스트 형식화를 적용할 수 있는 필터를 지원합니다. 이 필터들은 중괄호 보간법 혹은 v-bind표현법 을 이용할 때 사용가능합니다. (v-bind 표현법에서는 2.1.0+ 부터 사용 가능합니다.) 필터는 자바스크립트 표현식 마지막에 “파이프”심볼과 함께 추가되어야 합니다.

1
2
3
4
5

<!-- 중괄호 보간법 -->
{{ message | capitalize }}

<!-- v-bind 표현 -->
<div v-bind:id="rawId | formatId"></div>

컴포넌트 옵션에서 로컬 필터를 정의할 수 있습니다.

1
2
3
4
5
6
7

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

플러그인은 일반적으로 전역 수준 기능을 Vue에 추가합니다. 플러그인에는 엄격하게 정의된 범위는 없습니다. 일반적으로 작성할 수있는 플러그인에는 여러 유형이 있습니다.

1. 약간의 전역 메소드 또는 속성 추가 예. vue-custom-element

2. 하나 이상의 글로벌 에셋 추가 : 디렉티브 / 필터 / 트랜지션 등. vue-router

기본

Vue는 템플릿을 사용하여 대다수의 경우 HTML을 작성할 것을 권장합니다. 그러나 JavaScript가 완전히 필요한 상황이 있습니다. 바로 여기에서 템플릿에 더 가까운 컴파일러인 render 함수를 사용할 수 있습니다.

render 함수가 실용적 일 수있는 간단한 예제를 살펴 보겠습니다. 링크를 포함한 헤더를 생성한다고 가정한 예제 입니다.

1
2
3
4
5

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

위의 HTML의 경우 이 컴포넌트 인터페이스가 필요하다고 결정합니다.

시작

기초

Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// mixin 객체 생성
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// mixin을 사용할 컴포넌트 정의
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"