본문 바로가기

Knowledge Wiki

 (169)
Vue.js Vue 3 버전 특징 1. Vue 3 버전부터는 v-if와 v-for 를 한 곳에서 못씀. 에러 뱉음.
Vue.js router 1. Vue랑 Bootstrap 같이 쓸 수 있음 2. vue-router 설치 npm install vue-router@4 3. router 쓰려면 main.js에서 router 적용 import router from './router' ... createApp(App).use(router).mount('#app') 4. router 쓰면서 props 전송하려면 App.vue에서 그냥 태그에 전달해주면 됨 5. 페이지를 나누고 싶으면 우선 컴포넌트를 만들어야함 6. 쓰면 버튼처럼 라우팅할 수 있음 7. 라우팅 시 변수를 사용할 수 있다. -> URL 파라미터 사용 $router 변수로 참조하면됨 // router.js { path: "/detail/:id", component: Detail, } // ..
Vue.js AJAX 1. AJAX 요청도 Hook 내에서 다 처리함 created(), mounted() 내에서 주로 AJAX 요청함. 2. 더보기 버튼은 보통 AJAX로 서버에 요청하는 방식 사용 3. form 태그는 필연적으로 새로고침이 동작함. 새로고침 안하려면 AJAX 써야함. 4. AJAX 요청 방법 1) axios 라이브러리 사용 2) 기본 fetch 함수 -> 최신 기능이라 최신 브라우저 아니면 기능 지원 안함 5. axios 설치 npm install axios 6. axios 사용법 import axios from 'axios'; axios.get(); // GET 요청 axios.post(); // POST 요청 axios().catch(); // 실패시 실행하는 코드 - 예외처리 등
Vue.js Life Cycle 1. Vue 컴포넌트의 Life Cycle 컴포넌트는 웹페이지에 표시되기까지 일련의 step을 거침 그 step을 Life Cycle 이라고 함 1) create step 2) mount step 3) 생성 step 4) upate step -> data가 변하면 컴포넌트가 재렌더링됨 5) unmount step -> 컴포넌트가 삭제됨 2. LifeCycle은 Hook을 제공해줌 beforeCreated(), mounted()등 여러 Hook이 있음 export default { name: "App", beforeCreated(){ }, mounted(){ }, }
Vue.js 애니메이션 - <transition> 1. 애니메이션을 주고싶으면 해당 요소를 으로 감싸기 : Vue에서 제공하는 스페셜한 태그 // CSS .fade-enter-from { opacity: 0; } .fade-enter-active { transition: all 5s; } .fade-enter-to { opacity: 1; } .fade-leave-from { opacity: 1; } .fade-leave-active { transition: all 1s; } .fade-leave-to { opacity: 0; }
Vue.js 클래스 1. class를 조건부로 넣으려면 { 클래스명 : 조건 } 으로 하면 됨
Vue.js v-model 1. v-model 15번을 축약한 키워드임. 많이 씀. 여러 input 타입에 대해 사용할 수 있음. 2. v-model 자료형을 무조건 숫자로 받고 싶은 경우 -> v-model.number
Vue.js input 태그 1. input 태그에서 자주 사용하면 이벤트 -> @input, @change 2. $event 는 JavaScript 이벤트리스너의 이벤트 파라미터 e와 동일한 역할 3. input 값을 검증하고 싶으면 watcher를 쓰면 됨 data를 감시하는 함수 export default { name: "Modal", data(){ return { month: 1, } }, watch: { month(oldValue, newValue) { // month 데이터가 변할 때마다 watcher도 실행됨 if (oldValue >= 13) { alert("13이상 입력하지 마셈"); } }, }, };

티스토리툴바