vue6 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기능 -> 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. vuetify2 뷰티파이2는 이미 서비스가 끝나서 뷰티파이3나 퀘이사를 공부해야하지만뷰티파이 강좌가 2버젼이라서 한번 사용해보기로 함 -------------------vue2 (vutify2) 뷰티파이2 사이트 https://v2.vuetifyjs.com/en/mdi아이콘 https://pictogrammers.com/library/mdi/샘플이미지무료 사이트 https://pixabay.com/ko/인프런 강좌(무료) : Vuetify Admin Template 만들기 - 기본편 (Based Vue2) 짐코딩 https://www.inflearn.com/course/lecture?courseSlug=%EB%B7%B0%ED%8B%B0%ED%8C%8C%EC%9D%B4-%EC%96%B4%EB%93%9C%EB%AF%BC-.. 2024. 6. 2. 이전 1 다음
