본문 바로가기

코딩애플/코딩애플-vue.js

 (13)
[part2-5] Nested routes & push 함수 App.vue Home 리스트 페이지 상세 페이지 router.js import { createWebHistory, createRouter } from "vue-router"; import List from './components/List.vue' import Home from './components/Home.vue' import Detail from './components/Detail.vue' import Author from './components/Author.vue' import Comment from './components/Comment.vue' const routes = [ { path: "/detail/:id(\\d+)", component: Detail, children: [ { p..
[17] lifecycle hooks [17] Vue의 라이프사이클을 어디다 쓰냐면 컴포넌트를 등장하고 나서 2초후에 사라지게 https://v3.ko.vuejs.org/guide/instance.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%83%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%84%80%E1%85%B3%E1%84%85%E1%85%A2%E1%86%B7 어플리케이션 & 컴포넌트 인스턴스 | Vue.js 어플리케이션 & 컴포넌트 인스턴스 어플리케이션 인스턴스 생성하기 모든 Vue 어플리케이션은 createA..
[16] sort 함수 [16] 상품정렬기능과 데이터 원본 보존 원룸들 데이터를 가격으로 정렬하면 알아서 노출되겠지?? sort() 설명 a-b =음수면 a는 왼쪽 2 - 5 = -3 App.vue import { apple, data } from "./assets/oneroom.js"; // import data() { return { 누른거: 0, 원룸들: data, // 데이터 모달창열렸니: false, 신고수: [0, 0, 0], menus: ["Home", "Shop", "About"], products: ["역삼동 원룸", "천호동 원룸", "마포구 원룸"], prices: [70, 60, 50], logo: "로고샵", 스타일: "color : red", profileUrl: [ require("./assets/r..
[15] vue 애니메이션 [15] Vue에서 매끈한 UI 애니메이션 주는 법 2개 방법1) 클래스 2개로 opacity 속성을 변경함 .start { opacity: 0; transition: all 1s; } .end { opacity: 1; } .fade-enter-from { opacity: 0; } .fade-enter-active { transition: all 1s; } .fade-enter-to { opacity: 1; } .fade-leave-from { opacity: 1; } .fade-leave-active { transition: all 1s; } .fade-leave-to { opacity: 0; }
[14] watcher [14] watcher로 데이터 감시하는 법 month 라는 데이터가 변할 때마다 여기 있는 코드가 실행됨 => 이게 watcher 기능임. 함수명을 특이하게도 내가 감시하고 싶은 데이터명으로 작명하셔야합니다. Modal.vue export default { data(){ return { month : 1 } }, watch : { month(){//month(a) 안에 파라미터 아무거나 작명해서 사용 가능 //첫째는 변경될 값, 둘째는 변경전 값 //month가 변경될 때 실행할 코드 } } } 숙제 : month라는 데이터 항목에 숫자가 아니라 문자가 들어오면 "숫자만 입력하라"는 alert()창을 띄워주고 month의 초기값을 1로 다시 설정해봅시다. watch: { month(a) { if (a ..
[13] v-model 사용자의 input을 받는 법 (v-model) 이벤트리스너 1단계 : 값을 가져와서 곱해준다. {{ month }}개월 선택 함: {{ 원룸들[누른거].price * month }} 만원 data() { return { month: 1, }; }, Modal.vue {{ month }} {{ 원룸들[누른거].title }} {{ 원룸들[누른거].content }} {{ month }}개월 선택 함: {{ 원룸들[누른거].price * month }} 만원 닫기 App.vue {{ menu }} {{ logo }} 2단계: v-model 로 축약한다.
[12] custom event 자식이 부모데이터 바꾸고 싶으면 custom event 로 메세지만 주십쇼 자식은 부모가 가진 데이터를 수정할 수 없다 Product.vue {{ 원룸.image }} {{ 원룸.title }} {{ 원룸.price }} 만원 {{ 원룸.image }} // 이렇게하면 작동 안함 {{ 원룸.title }} {{ 원룸.price }} 만원 오늘의 5분 숙제 : 모달창 닫기버튼과 기능을 다시 만들어오십시오. 누르면 닫혀야합니다. 데이터를 어떻게 변경하면 모달창 닫히는지 다시 생각해봅시다. 닫기 App.vue {{ menu }} {{ logo }} Modal.vue {{ 원룸들[누른거].title }} {{ 원룸들[누른거].price }} 만원 {{ 원룸들[누른거].content }} 닫기
[9,10,11] Component, props [9] HTML 복잡해보이면 컴포넌트 Component 만들어 쓰셈 새로운 컴포넌트 만드는 법. 1. 새로운 vue 파일 만들어라 2. 새로운 vue 파일에 덩어리 html을 넣어라 여기서 < 누르고 자동 완성으로 뷰 형식을 사용해라 (templat, script, style) (예를 들면 Discount.vue) 축약할 HTML~~ 축약해둔 컴포넌트 쓰는 법 1. vue 파일 import 해온다 2. components: { }에 등록하고 3. 쓰셈 그럼 길고 더러운 HTML을 깔끔하게 한 글자로 축약해서 적어넣을 수 있습니다. import Discount from './Discount.vue 경로' //1. import하고 export default { data() { }, components : {..

티스토리툴바