DEVLOG DEVLOG

Vue 컴포넌트에 재사용 가능한 기능을 사용할 수 있게 해주는 유연한 방법 mixin 객체는 모든 컴포넌트 옵션을 포함할 수 있음 컴포넌트에서 mixin을 사용하면 mixin의 모든 옵셜들은 컴포넌트 고유 옵션에 혼합됨 @Component class TestMixin extends Vue { private name: string = 'Test Mixin' private mounted(): void { console.log(`${this.name}`); } } @Component({ mixins: [TestMixin] }) export default class TestComponent extends Vue { private mounted(): void { console.log('Test Component'..

전역 API Vue.extends(options) 전달인자 {Object} options 사용방법 Vue 생성자의 하위 클래스를 만듦 전달인자는 옵션을 포함하는 객체 Vue.nextTick([callback, context]) 전달인자 {Function} [callback] {Object} [context] 사용방법 다음 DOM 업데이트 사이클 이후 실행하는 콜백을 지연시킴 DOM 업데이트를 기다리기 위해 일부 데이터를 변경한 직후 사용해야함 this.$nextTick(() => { console.log('next tick'); }) this.$nextTick().then(() => { console.log('usage as a promise'); }) Vue.set(targ..

beforeCreate Vue 인스턴스가 초기화 된 직후에 실행 컴포넌트가 DOM에 추가되기 전이어서 this.$el에 접근할 수 없음 데이터와 메소드도 접근할 수 없음 created 컴포넌트가 DOM에 추가되기 전이어서 this.$el에 접근할 수 없음 데이터와 메소드에 접근 가능 이벤트 리스너 선언을 하기에 적합 beforeMount 템플릿의 여부를 확인한 후 렌더링하여 가상 DOM이 생성됨 가상 DOM이 실제 DOM에 부착되진 않음 mounted 가상 DOM이 실제 DOM에 부착되고 난 후에 실행됨 this.$el에 접근할 수 있음 자식 컴포넌트가 mount된 이후에 부모 컴포넌트가 mount됨 beforeUpdate 컴포넌트에서 사용되는 데이터의 값이 변해서 DOM에 변경사항을 적용시키기 전에 실..

Data를 가져오는 주체와 cache에 저장 여부를 설정하는 옵션 chche-first fetch-policy 옵션의 default 기본적으로 cache data를 가져옴 cache data가 없을 경우에 network에서 데이터를 받아오고 cache에 저장 cache-and-network 기본적으로 cache data 가 있을경우 가져옴 그 후에 network로 부터 data를 받아오고 cache에 저장 cache-only cache data를 가져옴 cache data가 없을 경우에는 fail network-only nework에서 data를 가져옴 그후에 cache에 저장 no-cache nework에서 data를 가져옴 network 호출에 실패해도 cache에 저장하지 않음

Property Decorator @Prop @Prop(options: (PropOptions | Constructor[] | Constructor) = {}) import { Vue, Component, Prop } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { @Prop(Number) readonly propA: number | undefined @Prop({ default: 'default value' }) readonly propB!: string @Prop([String, Boolean]) readonly propC: string | boolean | undefined } 각 Pro..

Class Component @Component decorator 사용하면 클래스 컴포넌트 사용 가능 import Vue from 'vue' import Component from 'vue-class-component' @Component export default class ExampleClass extends Vue { } data는 클래스의 property로 선언 가능 import Vue from 'vue' import Component from 'vue-class-component' @Component export default class ExampleClass extends Vue { private exampleData: string = 'example'; } method는 클래스의 functi..

Vue에서 제공하는 특수 속성으로 v- 접두어가 붙어있음 렌더링 된 DOM에 특수한 반응형 동작을 지시 종류 1. v-text {{ }}의 기능과 동일 2. v-html HTML 태그를 지원 3. v-show 해당 엘리먼트를 보여줄지 여부(true/false) 4. v-if 엘리먼트의 표시 여부에 대한 조건문 v-else-if, v-else value > 5 5. v-pre 해당 엘리먼트에 지시문이 없다는걸 컴파일러에게 알려 컴파일 타임에 건너뜀 컴파일 속도를 향상 시킬 수 있음 6. v-cloak Vue 인스턴스가 준비되기 전 템플릿을 위한 HTML코드를 숨길 때 사용 value > 5 7. v-for {{ todo.text }} 8. v-on 사용자와 애플리케이션이 상호 작용할 수 있도록 메소드를 호..