전역 설정

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

silent

optionMergeStrategies

devtools

errorHandler

2.4.0에서 이 훅은 Vue의 사용자 정의 이벤트 핸들러가 발생하는 에러를 감지합니다.

오류 추적 서비스인 Sentry에서 공식 사용 설명서를 제공합니다.

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, key, value )

Vue.delete( target, key )

Vue.directive( id, [definition] )

Vue.filter( id, [definition] )

Vue.component( id, [definition] )

Vue.use( plugin )

Vue.mixin( mixin )

Vue.compile( template )

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

computed

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

옵션 / 에셋

directives

filters

components

옵션 / 컴포지션

parent

mixins

extends

provide / inject

2.2.0에서 추가됨

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

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

주입한 값을 data로 사용

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

옵션 / 기타

name

delimiters

functional

model

2.2.0에서 추가됨

inheritAttrs

2.4.0 이후 추가됨

comments

2.4.0 이후 추가됨

인스턴스 속성

vm.$data

vm.$props

2.2.0에서 추가됨

vm.$el

vm.$options

vm.$parent

vm.$root

vm.$slots

vm.$scopedSlots

2.1.0의 새로운 기능

vm.$refs

vm.$isServer

vm.$attrs

vm.$listeners

인스턴스 메소드 / 데이터

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

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

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

vm.$set( target, key, value )

vm.$delete( target, key )

인스턴스 메소드 / 이벤트

vm.$on( event, callback )

vm.$once( event, callback )

vm.$off( [event, callback] )

vm.$emit( event, […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-if와 함께 사용하는 경우, v-for는 v-if보다 높은 우선순위를 갖습니다. 자세한 내용은 리스트 렌더링 가이드를 확인하십시오.

v-for에 대한 자세한 사용법은 아래 링크된 가이드에서 설명합니다.

v-on

v-bind

v-model

v-pre

v-cloak

v-once

특별한 속성들

key

예제:

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

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

ref

slot

is

내장 컴포넌트

component

transition

transition-group

keep-alive

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

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

<!-- 기본 사용 -->
<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 인터페이스

서버측 렌더링