본문 바로가기
반응형

vue38

vue3 빌드하지않고 사용하기 vue3 without npmvue3에서는 빌드하지 않고, npm 없이 사용할 수 있는 방법이 있습니다.{{ message }}위 코드는 "Hello Vue"라는 값을 가진 message 변수의 값을 출력하는 예제입니다.브라우저에서 확인하면, HTML 코드 작성시에는 {{message}} 라고 써있던 부분이,아래와 같이 Hello Vue로 대체된 것을 확인할 수 있습니다.#javascript,#vue,#vue3,#vuejs 2024. 9. 20.
vue3 lifecycle hook, vue3 라이프사이클 순서, vue3 onMounted/unmounted/beforecreate, vue3 라이프사이클 예제코드 vue3 lifecycle hook이란?Vue3의 생명주기 훅(Lifecycle Hook)이란,Vue의 컴포넌트가 생성되고 소멸될 때까지의 다양한 단계에서 특정 로직을 실행하도록 할 수 있는 메소드입니다.이를 통해 개발자는 Vue 컴포넌트의 생명주기 동안에 발생하는 다양한 이벤트에 대응하여 특정 로직을 실행할 수 있습니다.Vue3에서는 아래와 같은 생명주기 훅이 있습니다:beforeCreate: 인스턴스가 생성되고 반응성 속성이 설정되기 전에 호출됩니다.created: 인스턴스가 생성되고 반응성 속성이 설정된 후에 호출됩니다.beforeMount: 인스턴스가 마운트되기 직전에 호출됩니다.mounted: 인스턴스가 마운트된 직후에 호출됩니다.beforeUpdate: 데이터가 변경되어 가상 DOM이 다시 렌.. 2024. 9. 16.
vue3 router 사용법, vue router params, vue router push, vue router history, vue dynamic route Vue3에서는 Vue Router를 사용하여 SPA(Single Page Application)를 구현할 수 있습니다.Vue Router는 여러 개의 컴포넌트를 페이지 단위로 관리하며, URL에 따라 적절한 컴포넌트를 렌더링하여 보여줍니다.Vue Router 설치Vue CLI를 사용하여 프로젝트를 생성할 때 Vue Router를 추가로 설치할 수 있습니다.이미 생성된 프로젝트에 Vue Router를 추가하려면 다음 명령어를 실행합니다.npm install vue-routerVue Router 설정vue router 설치가 완료되면, src 디렉토리 안에 router 디렉토리를 생성하고,그 안에 index.js 파일을 생성하여 Vue Router를 설정할 수 있습니다.import { createRouter.. 2024. 9. 4.
vue3 watch 사용법, vue3 watch 여러개, vue3 watchEffect 사용법 vue3 watch, watchEffect란?Vue3에서는 watch와 watchEffect라는 두 가지 반응형 속성 감시자를 사용하여 데이터 변경을 감지하고 반응할 수 있습니다.주로 데이터의 변화에 따른 부수적인 효과를 처리하는 데 사용됩니다.vue3 watch 사용법watch는 특정 반응형 속성이나 계산된 속성을 감시하며, 이들의 값이 변경될 때마다 콜백 함수를 호출합니다.위의 예제에서는 count 데이터의 변화를 감시하고 있으며, count 값이 변경될 때마다 콘솔에 메시지를 출력하게 됩니다.vue3 watchEffect 사용법watchEffect는 watch와 유사하지만,콜백 함수 내부에서 접근하는 모든 반응형 속성을 자동으로 추적하여,이들 중 어떤 것이든 변경될 때마다 콜백 함수를 호출합니다.위.. 2024. 8. 20.
vue3 slot이란, vuejs slot 사용법, vue slot 여러개, v-slot vue.js slot이란, v-slot이란?slot이란 무엇인가 들어가는 자리라는 의미이며, 게임에서 아이템 슬롯 할때 말하는 슬롯과 같이 쓰입니다.vue js에서 slot은 컴포넌트를 넣을 수 있는 자리를 만들어, 컴포넌트의 재사용성을 높이기 위해 사용되는 기술입니다.vue3 slot 사용법, v-slot먼저, Component에서 아래와 같이 을 사용하여,외부에서 을 주입할 수 있는 자리를 만들어줍니다.Component.vue Component.vue를 사용하는 아래 코드에서, 안쪽에 와 같이 입력을 하면,Component.vue에서 정의한 props를 접근할 수 있습니다.App.vue ✔️ {{ slotProps.item }} 위 코드에 대한 결과는 아래.. 2024. 8. 18.
vue3 provide/inject란?, vue3 provide inject 예제 vue.js provide, inject란?일반적으로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때는 props 를 이용합니다.그런데 부모와 자식 관계가 깊어질수록 props 로 데이터를 전달하니, 프로젝트가 복잡해져서 Event bus나 vuex에 데이터를 담았습니다.하지만, Vue3에서는 Component 간에 데이터를 공유하고 관리하는 방법 중 하나로 provide와 inject를 제공합니다.이 것은 주로 컴포넌트 트리에서 부모와 자식 간에 데이터를 전달하는데 사용되며,간접적인 상속을 통해 중첩된 컴포넌트 구조에서 데이터를 공유할 수 있습니다.provideprovide는 컴포넌트에서 사용할 수 있는 데이터와 함수를 제공하는 역할을 합니다.이는 setup() 메서드 내에서 provide() 함.. 2024. 8. 8.
vue3 props, vue3 props 사용법, vue props function, vue props 전달, vue3 props ref, defineProps, script setup props vue.js Props란?, vuejs props란?vue에서의 props란 data를 부모 component에서 자식 component로 데이터를 전달하기 위한 방식입니다.아래와 같이 두 개의 component로 이뤄진 component가 있다고 칩시다.component1과 component2는 자식 component라 하고, 이 둘을 포함한 component는 부모 component입니다.부모 component에서 자식 component로 데이터를 전달하기 위한 방법이 props가 있는 것이며,props를 이용하면 부모 component에서 값을 변경하는 코드를 한번만 작성하면 여러개의 component에서 사용하는 값을 동시에 바꿀 수 있습니다.component1component2vue3 Props.. 2024. 8. 7.
vue3 emit이란, vuejs emit 사용법, vue emit 여러개, vue emit 인자, defineEmits vue.js emit이란, vue에서 emit이란?emit이란 영어로 방출하다라는 뜻을 가졌습니다.vue.js에서 emit이란 $emit 함수를 의미합니다.$emit함수는 child component에서 parent component로 communication할 수 있도록,임의의 이벤트를 발생시켜주는 vue의 build-in 함수입니다.이를 도식화하면 아래와 같습니다.$emit의 첫번째 매개변수는 event/함수명이고, 그 뒤에는 가변 인자입니다.@startumlnode ParentComponent{}node ChildComponent{}ChildComponent -> ParentComponent: $emit('event명', 인자1, 인자2, ...)@enduml$emit 사용법, $emit 예제코드아.. 2024. 8. 6.
반응형

티스토리툴바