전역 설정

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

silent

optionMergeStrategies

devtools

errorHandler

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

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에서 추가됨

인스턴스 속성

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.$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

ref

slot

내장 컴포넌트

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>

slot

VNode 인터페이스

서버측 렌더링