- vm > methods > watch = 호출 시마다
- vm > methods > computed = 캐시
- {{function}} = computed = 캐시
- {{fucntion()}} = 캐시 X
- v-bind:prop = :prop
- v-on:action = @action
- 엘리먼트 추가하고 싶지 않을때
v-if vs v-show
- v-if = 조건부 랜더링
- v-show = CSS toggle
v-for의 :key
- 반복되는 DOM 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는 경우를 제외하면, 가능하면 언제나 v-for에 key를 추가하는 것이 좋다
배열변경감지 > 변이메서드
호출된 원본 배열을 변형함:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
주의사항
-
인덱스로 배열에 있는 항목을 직접 설정하는 경우, 예: vm.items[indexOfItem] = newValue
- Vue.set(example1.items, indexOfItem, newValue) example1.items.splice(indexOfItem, 1, newValue)
-
배열 길이를 수정하는 경우, 예: vm.items.length = newLength
- example1.items.splice(newLength)
객체변경감지 주의사항
속성 추가 및 삭제 감지 불가
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 는 반응형입니다.
vm.b = 2
// `vm.b` 는 반응형이 아닙니다.
이렇게 해야함.
Vue.set(object, key, value)
keycode config
- Vue.config.keyCodes.f1 = 112
객체를 bind
todo: {
text: 'Learn Vue',
isComplete: false
}
<todo-item v-bind="todo"></todo-item>