반응형 컴퓨터/CSR (React, Vue)22 [Vue] 뷰에서 bootstrap 설치 (5버전) https://getbootstrap.com/ 사이트 접속 vue 프로젝트 경로에 다음 명령어로 bootstrap 5 설치 npm i bootstrap@5.3.0-alpha1 main.js 에 다음 파일 import import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' 2023. 4. 1. [Vue] 뷰 component 사용법 및 정리 컴포넌트화 시키면 좋은 거 다른 곳에서 쓸거 같을 때 (재사용해야될 때) 라우터화 시킬 때 (라이브러리) html 이 너무 복잡하고 길 때 순서 💜 자식 1. 컴포넌트화 시킬 자식 파일 만들기 이름은 multiword 로 짓기 (DetailModal.vue ◀◀ 이런 식으로) 2. 자식컴포넌트 name key : 자식컴포넌트 이름 value export default { name:'DetailModal', // 생략 } 💜 부모 1. 부모컴포넌트에 import 시켜주기 // templete 태그 밖에다가 해준다. import DetailModal from './DetailModal.vue'; 2. 부모컴포넌트 components key : 자식컴포넌트 이름 value export default { com.. 2023. 4. 1. [Vue] 뷰 lifeCycle 정리 1. lifeCycle 단계 - vue 의 lifeCycle 은 타 spa 들의 lifeCycle 과 같다.🙄 create 단계 ⬇⬇ mount 단계 ⬇⬇ 컴포넌트 생성 ⬇⬇ update 단계 ⬇⬇ unmount 단계 2. lifeCycle 단계 특징 create 단계 : 데이터만 존재하는 단계 mount 단계 : template 안에 있는 애들을 html 로 바꿔줌 컴포넌트 생성 : index.html 에 장착함 update 단계 : 컴포넌트 수정 단계 unmount 단계 : 페이지 닫을 때 + 😃 data 가 변하면 html 은 실시간 재랜더링 => 컴포넌트가 실시간 재랜더링됨 3. lifeCycle 메소드 beforeCreate() created() beforeMount() mounted() bef.. 2023. 4. 1. [Vue] transition 이벤트 (동적 class, Transition 태그) 뷰로 서서히 뭔가가 바뀌는 이벤트를 줄 수 있는 방법이 두가지가 있습니다. 1. 동적 class 넣기 2. Transition 태그 사용 동적 class 넣는거는 정통적인 css 디자인 방법이구요 Transition 태그는 뷰 만의 방법인데 진짜 편해여 1. 동적 class 넣기 css 로 애니메이션을 주는 방법인데 일단 시작과 끝 애니메이션 css 를 만들어놓고 시작 css 는 처음부터 할당, 끝 css 는 원할 때 할당해줍니다. 2. Transition 태그 사용 근데 뷰에는 더 쉽게 애니메이션을 구현할 수 있습니다. 시작 시 처음: .class명-enter-from 시작 시 transform: .class명-enter-active 시작 시 끝: .class명-enter-to 끝날 시 처음: .cla.. 2023. 3. 19. [Vue] 뷰에서 if else 쓰기 (v-if, v-else-if, v-else) 1. v-if 문법 조건식이 참일 때만 html 보여줌 닫기 2. v-else-if: 조건식을 연달아서 두개 세개 사용 v-else: v-if,v-else-if 에 적은 조건식이 참이 아닐 경우 실행 안녕하세요 안녕하세요2 안녕하세요2 2023. 3. 19. [Vue] 뷰에서 함수 사용 (method) 전체 증가 숫자들 증가 숫자 : {{숫자들[0]}} 총 누른 횟수 : {{숫자}} 1. 함수사용 v-on:click="함수이름" 또는 @click="함수이름" 2. 함수 선언 함수 선언은 methods 안에 해야됨 2023. 3. 19. [Vue] 뷰에서 for 문 쓰기 {{ a }} 2023. 3. 19. [Vue] 뷰.js 기본 틀 React 를 공부했을 때 제일 의아했던 부분이 라이브러리 치고 자유도가 생각보다 높다는 거였습니다. 근데 Vue 를 배울때는 역시 라이브러리구나 라는 생각이 들더라구요 (엄청난 제약들....🙄) + Visual Studio Code 에서 Vetur 설치 시 < 하고 tab 누르면 기본 틀을 만들어줍니다. 2023. 3. 19. 이전 1 2 3 다음 반응형