vuejs6

• 

  Vue의 ObjectBinding Object bindingv-textExpects: String태그 안에 text값을 input 시키는 것innerTEXT와 같다(?){{ msg }}v-htmlExpects: String태그 안에 html을 input 시키는 것innerHTML과 같다(?) v-showExpects: Any표현식 값의 진위 여부에 따라 요소를 보이게 or 안보이게 하는 것v-show가 포함되어 있는 요소는 항상 랜더링되어 DOM에 남아있지만, CSS속성만 토글한다.즉, v-if는 랜더링에서 조건이 거짓이면 DOM에 없지만, v-show는 DOM에는 남아 있다.Hello! v-if & v-else & v-else-ifExpects: Any조건문을 사용 할 수 있다.tymleaf의 “th:if”와 같다고 생각하면 된.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 Slot 파헤치기 Slotslot은 컨텐츠 배포 outlet 역할을 하는 커스템 Vue Eelement사용방법App.vue: props 버전 App.vue: slot 버전 Cancel Submit Slot에 default값 적용BaseButton.vue Submit Slot에 값을 제공하면 default 컨텐츠를 override(재정의) 한다.SubmitCancelCancelNamed SlotsSlot이 서로 고유하도록 설정하는 방법Slot에는 사용자 지정 식별자로 지정할 수 있는 named prop이 있다.Scoped Slots자식 props를 부모에서 사용 하고자 할 때 사용하위 Component가 상위 Component가 필요로하는 데이터를 제어하고자 할 때 사용slo.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 Props 파헤치기 Props사용방법type정의 가능한 기본 JavaScript의 데이터 타입→ String→ Number→ Boolean→ Array→ Object→ Date→ Function→ Symbolsrequired필수여부(중요값)defaultdefault값을 설정default값이 설정되어 있으면 required는 필요없다. {{ title }} {{ length }} checkProps: Custom Validation기존 props 정의 방법의 단점다음과 같이 정의되어 있을 때 image 프롭에 다음과 같이 값이 들어온다면??/images/movie-poster.pn/imagesmovie-poster.pngimages/movie-poster.png해당 prop에 있어 요구사항요구사항1 : 이미지는 반드시 루.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 watchEffect 와 watch 파헤치기 watchEffect(${function}, {${options}} )컴포넌트 렌더링 직전에 실행된다.종속성을 반응형으로 추적하면서 함수를 즉시 실행하고 종속성이 변경될 때마다 함수를 다시 실행하는 함수기본 옵션값의 flush는 ‘pre’로 설정되어 있다.드물지만 캐시 무효화 등 반응형 의존성이 변경될 때 즉시 와처를 트리거해야 하는 경우flush를 ‘sync’로 사용하여 수행할 수 있다. → 그러나, 여러 property가 동시에 업데이트 되는경우 성능 및 데이터에 문제를 야기할 수 있다.Type function watchEffect( effect: (onCleanup: OnCleanup) => void, options?: WatchEffectOptions ): StopHandle t.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 ModelValue 파헤치기 :modelValuev-model은 양방향 바인딩 컴포넌트다.vue3는 내부적으로 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 Props를 수정 할 수 있게 했다.props는 기본적으로 readOnly reactive object이다.위의 소스코드는 컴파일러에 의해 아래와 같이 변한된다.해당 기능을 컴포넌트에 적용 시키면 다음과 같이 변경된다. first = newValue"/>코드 부모 Component 자식 Component 참고 Reference Component v-model | Vue.js FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 nextTick() 파헤치기 nextTick( )export function nextTick( this: T, fn?: (this: T) => void): Promise { const p = currentFlushPromise || resolvedPromise return fn ? p.then(this ? fn.bind(this) : fn) : p;}nextTick( )다음 DOM 업데이트 주기가 끝난 후 실행할 지연된 콜백데이터를 수정한 직후에 이 방법을 사용하여 업데이트 된 DOM을 가져온다.const message = ref('Hello!')const changeMessage = async newMessage => { message.value = newMessage // 여기서 DOM에서 얻은 값은 이전 값입니다. .. FrameWorks/Vue 2024. 6. 12.