전체 글34 vue3+swiper npm install swiper npm install swiper/vueSwiper와 Vue용 Swiper 패키지 설치 스타일 임포트 해주기import 'swiper/swiper-bundle.css'12345678910111213141516171819202122232425src/main.js 에 import 'swiper/swiper-bundle.css'--> template> div> swiper :modules="[Navigation, Pagination]" navigation pagination> swiper-slide> img src="https://via.placeholder.com/600x300?text=Slide+1" alt="slide1" /> /sw.. 2024. 6. 29. vue3 페이지 이동 할때마다 함수를 각각 지정하지않고 링크가 여러개일 경우로 만들기1234567891011121314151617template> div> button @click="navigateTo('/about')">Go to About/button> button @click="navigateTo('/contact')">Go to Contact/button> button @click="navigateTo('/services')">Go to Services/button> /div>/template> script setup>import { useRouter } from 'vue-router' const router = useRouter() const navigateTo = (path) => { rout.. 2024. 6. 29. vue3 한개의 스크립트로 여러페이지에서 사용하기 ``은 Vue 3.2부터 도입된 문법으로, 컴포넌트의 setup 함수를 더 간결하게 작성할 수 있습니다. 아래는 `useAlert` Composition 함수를 `` 상단에 사용하는 방법입니다. ### 1. `useAlert` Composition 함수 정의 먼저, `useAlert` Composition 함수를 정의합니다.123456789101112131415161718import { ref } from 'vue' export function useAlert() { const showAlert = ref(false) const vAlert = () => { showAlert.value = true setTimeout(() => { showAlert.value = false .. 2024. 6. 28. 레이어팝업 위치 이동하기 vue3기능 -> Teleport 레이어팝업은 콘텐츠 영역의 바깥에 위치해야하는데vue3에 텔레포트 기능으로 저렇게 옮겨 줄수가 있다 Teleport to="#modal"> AppModal>AppModal> Teleport>index.html에서 2024. 6. 28. vue3 사라지고 나올때 트렌지션 효과 https://vuejs.org/guide/built-ins/transition.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org v-enter-from => 앞에 이름을 마음대로 지정해서 showDown-enter-from 이런식으로 변경해서 사용 에 name없을때는 기본인 v-enter-from없을때는 기본 클래스1234567891011121314151617181920212223242526272829template> Transition name="showDown"> div v-if="show" class="alert alert-success" role="alert">{{ message }}/div> /Transition>/.. 2024. 6. 28. vue3+bootstrap5 크롬 웹스토어 vue.js devtools 검색 vscode 플러그인 vetur은 뷰2용이라서 아래설치시 비활성화 volar 볼라(뷰3용) vue vscode snippets ---------------------- npm init vue@latest project name: learn-vue3 jslint ok 프리티어 ok 라우터와 피니아 둘다 직접 설치할꺼기때문에 저기까지만 설치 npm install npm run dev components>icons> 안에 파일 안쓰는거 삭제 base.css 삭제 app.vue 임포트 된거랑 안에 내용 지우고 정리 v-bind 축약형 v-bind:title="aaTitle" :title="aaTitle" ------------------- !!!!뷰에 부트스트.. 2024. 6. 20. 이전 1 2 3 4 ··· 6 다음
