API

API

전역 설정

Vue.config 은 Vue의 전역 설정을 가지고 있는 객체입니다. 앱이 실행하기 전에 아래의 속성들을 변경할 수 있습니다:

silent

optionMergeStrategies

devtools

errorHandler

warnHandler

2.4.0 이후 추가됨

ignoredElements

keyCodes

performance

2.2.0에서 추가됨

productionTip

2.2.0에서 추가됨

전역 API

Vue.extend( options )

Vue.nextTick( [callback, context] )

Vue.set( target, propertyName/index, value )

Vue.delete( target, propertyName/index )

Vue.directive( id, [definition] )

Vue.filter( id, [definition] )

Vue.component( id, [definition] )

Vue.use( plugin )

Vue.mixin( mixin )

Vue.compile( template )

Vue.observable( object )

New in 2.6.0+

Vue.version

var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // 지원하지 않는 버전의 경우..
}

옵션 / 데이터

data

props

propsData

methods

watch

옵션들 / DOM

el

`render`함수 또는 `template` 옵션 둘 다 없으면, 마운트할 DOM 요소의 내부 DOM이 템플릿으로 추출 될 것입니다. 이 경우, Vue의 런타임 + 컴파일러 빌드를 사용해야합니다.

template

render

renderError

2.2.0에서 추가됨

옵션 / 라이프사이클 훅

모든 라이프사이클 훅은 자동으로 this 컨텍스트를 인스턴스에 바인딩하므로 데이터, 계산된 속성 및 메소드에 접근할 수 있습니다. 즉, 화살표 함수를 사용해 라이프사이클 메소드를 정의하면 안됩니다.(예: created: () => this.fetchTodos()) 이유는 화살표 함수가 부모 컨텍스트를 바인딩 하기 때문에 this는 예상대로 Vue 인스턴스가 아니며 this.fetchTodos는 정의되지 않습니다.

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

2.5.0+에서 추가됨

  - errorCaptured 훅은 오류가 더 전파되지 않도록 false를 반환 할 수 있습니다. 이것은 본질적으로 “이 오류가 처리되었으므로 무시해야합니다.”를 의미합니다. 추가로 errorCaptured 훅이나 글로벌 config.errorHandler가 이 에러를 위해 호출되지 않도록합니다.

옵션 / 에셋

directives

filters

components

parent

mixins

extends

2.2.0에서 추가됨

주입한 값을 속성의 기본값으로 사용

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

주입한 값을 data로 사용
const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

2.5.0+에서 주입은 기본 값을 옵션으로 제공할 수 있습니다.

const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

다른 이름의 속성에서 주입해야 하는 경우 from을 사용하여 소스 속성을 나타냅니다.

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

prop의 기본값과 마찬가지로 원시형이 아닌 값에 대해서는 팩토리 함수를 사용해야합니다.

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

옵션 / 기타

name

delimiters

model

2.2.0에서 추가됨

2.4.0 이후 추가됨

comments

2.4.0 이후 추가됨

인스턴스 속성

vm.$data

vm.$props

2.2.0에서 추가됨

vm.$el

vm.$options

vm.$root

vm.$slots

vm.$scopedSlots

2.1.0의 새로운 기능

vm.$refs

vm.$isServer

vm.$attrs

New in 2.4.0+

vm.$listeners

New in 2.4.0+

인스턴스 메소드 / 데이터

vm.$watch( expOrFn, callback, [options] )

Objects 내부의 중첩된 값 변경을 감지하려면 options 인자에 deep: true를 전달해야 합니다. Array 변이를 수신하기 위해 그렇게 할 필요는 없습니다.

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// 콜백이 호출됩니다

vm.$delete( target, propertyName/index )

인스턴스 메소드 / 이벤트

vm.$on( event, callback )

vm.$off( [event, callback] )

vm.$emit( eventName, […args] )

인스턴스 메소드 / 라이프사이클

vm.$mount( [elementOrSelector] )

vm.$forceUpdate()

vm.$nextTick( [callback] )

vm.$destroy()

디렉티브

v-text

v-html

v-show

v-if

v-if와 함께 사용하는 경우, v-for는 v-if보다 높은 우선순위를 갖습니다. 자세한 내용은 리스트 렌더링 가이드를 확인하십시오.

v-else

v-else-if

2.1.0의 새로운 기능

v-if에 대한 “else if 블록”을 나타냅니다. 체이닝 가능합니다.

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for

v-on

v-bind

v-model

v-slot

v-pre

v-once

특별한 속성들

key

예제:

<transition>
  <span :key="text">{{ text }}</span>
</transition>

text가 변경되면 <span>는 패치가 아닌 교체되므로 트랜지션이 트리거됩니다.

ref

slot deprecated

Prefer v-slot in 2.6.0+.

slot-scope deprecated

Prefer v-slot in 2.6.0+.

scope replaced

범위를 가지는 슬롯으로서 <template> 요소를 표시하는데 사용됩니다. 2.5.0+ 이후에는 [slot-scope] 로 교체되었습니다.

is

내장 컴포넌트

component

transition

transition-group

keep-alive

2.2.0 이상에서는 <keep-alive> 트리 안에 있는 모든 중첩 된 컴포넌트에서activated와 deactivated가 실행됩니다.

주로 컴포넌트 상태를 보존하거나 재 렌더링을 피하는데 사용합니다.

<!-- 기본 사용 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 여러개의 조건부 자식 컴포넌트 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- <transition>과 함께 사용합니다. -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

<keep-alive>는 한개의 자식 컴포넌트가 토글되고 있는 경우를 위해 설계된 것에 주의해야합니다. 내부에 v-for가 있으면 작동하지 않습니다. 위와 같이 조건부 자식 컴포넌트가 여러개인 경우 <keep-alive>는 한번에 하나의 자식만 렌더링도록 요청됩니다.

slot

VNode 인터페이스

서버측 렌더링

이 문서에 문제를 제보하거나 기여하고 싶은 부분이 있으십니까? Github에서 이 페이지를 수정하세요!