/src ├── /composables │ ├── useCommon.js │ ├── useExtra.js │ ├── useUser.js │ ├── useProduct.js ├── /components │ ├── MyComponent.vue {{ message }} 인사하기 작별 인사 사용자: {{ userName }} 이름 변경 상품 목록 {{ product.name }} 상품 추가 같은 이름의 함수 처리방법 (충돌방지)1. 이름 변경 // 별칭을 사용하여 함수 이름 변경 const { greet: commonGreet } = useCommon(); const { greet: ..
프로그래밍/Vue.js
🔥 Vue 2에서는 Mixins 사용이 유용하지만, Vue 3에서는 Composition API (setup())를 추천! ✅ Mixins 장점✔ 여러 컴포넌트에서 동일한 기능을 쉽게 재사용 가능✔ 라이프사이클 훅, 데이터, 메서드까지 포함 가능 ❌ Mixins 단점✔ 데이터 및 메서드 충돌 가능 (우선순위 문제 발생)✔ 코드의 출처가 명확하지 않아 유지보수 어려움✔ Vue 3에서는 Composition API가 더 선호됨 Mixins는 Vue.js에서 코드의 재사용성을 높이기 위해 사용되는 기능이다. 여러 컴포넌트에서 공통적으로 사용되는 로직(예: 데이터, 메서드, 라이프사이클 훅 등)을 하나의 mixin 파일로 정의하고, 이를 필요한 컴포넌트에서 mixins 옵션을 통해 포함할 수 있다. 공통 ..
$attrsv-model = "form.name"v-bind="{ ...$attrs, class: null}"modelValue@input="$emit('update:modelValue', $event.target.value)" TextInput.vue (컴포넌트) {{ label }}: {{ error }} {{ $attrs }} Parents.vue (부모 컴포넌트) focus 랜더링 결과 [코드 분석해 보기] v-bind="{ ...$attrs, class: null }" 의 최종 랜더링 코드는{ "class": "pb-8 pr-6 w-full lg:w-1/2", "content": "content" } 이다..
공식링크 : https://devtools.vuejs.org/getting-started/introduction 3가지 방법 제공. 크롬 확장프로그램 설치 링크 :https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=ext_sidebar Vue.js devtools - Chrome 웹 스토어DevTools browser extension for Vue.jschromewebstore.google.com 크롬을 다시 껐다가 켜면 Vue 메뉴가 보인다.
기본 레이 아웃은 여러개의 slot 을 사용할 수 없다. [시나리오1]기본 Layout > MainLayout.vue 으로 사용한다. app.js 파일 내용import './bootstrap';import { createApp, h } from 'vue'import { createInertiaApp } from '@inertiajs/vue3'import MainLayout from './Layouts/MainLayout.vue'createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) const page = pages[`./Pages/${name}.vue`] ..
export default setup() props 와 emit// setup() export default { props: ['title'], emits: ['update'], setup(props, { emit }) { // props와 emit 사용 } } //
컴포넌트 정의 시:import Dropdown from '@/Shared/Dropdown.vue'export default { components: { Dropdown, // PascalCase로 정의 }} 템플릿에서 사용 시: Vue 컴포넌트 명명 규칙:컴포넌트 정의 시:- PascalCase 사용을 권장 (예: Dropdown, MainMenu)템플릿에서 사용 시:- kebab-case 사용을 권장 (예: , )- 하지만 소문자로도 사용 가능 ()- PascalCase도 가능 () 주어진 코드에서 소문자 dropdown을 사용한 이유는:HTML이 대소문자를 구분하지 않는 특성을 반영kebab-case나 소문자 사용이 HTML 표준과 더 잘 어울림일관성 있는 코딩 스타일을 유지하기 위함따라..
