Vue 19

Vue 데이터를 감시하고 싶을 땐 watcher

에 숫자로 입력 받고 싶을 땐 v-model.number="데이터이름" 으로 작성하면 num 숫자자료형으로 바꿔서 저장된다. 누군가가 에 문자를 넣는걸 막으려면 watcher를 쓰면 된다. watcher 는 데이터를 감시하면서 특정 데이터가 변경될 때마다 실행되는 코드 이다. 코드를 적용해 보겠다. data에 month 데이터를 감시하고 싶으면 watch안에 함수명을 감시할 데이터이름으로 만들어준다. export default { data(){ return { month : 1 } }, watch : { month(){ //사용자가 month를 문자로 입력하면 alert 띄우기 } } } watch 함수안에 month 데이터가 변할 때마다 실행하고 싶은 코드를 적어준다. export default { d..

Frontend/Vue 2024.01.10

Vue 사용자 input받는 법 v-model

에 뭔가 입력하고 기능을 만들 수 있다. 1. 에 유저가 입력한 내용을 data(){} 안에 저장하는 법 month 데이터에 $event.target.value를 작성하면 에 입력한 값을 가져올 수 있다. ( $event는 js에서 e.target의 e랑 똑같은 의미 .) //생략 // @input, @click, @change 이벤트핸들러 축약해서 편하게 쓸수 있다. v-model="데이터이름" 쓰면, 데이터에 사용자가 입력한 값을 저장한다 . // 2. 데이터바인딩해서 input에 입력되는 데이터를 출력한다. {{month}}개월 선택함 : {{원룸들[누른거].price * month}}만원 3. input에 입력한 데이터는 '문자자료형'으로 저장된다. 숫자자료형을 정해준다. v-model.numbe..

Frontend/Vue 2024.01.08

Vue 모달창에 id에 맞춰 내용 넣기

모달창을 클릭하면 id에 맞춰 내용이 데이터 바인딩 될 수 있도록 작업해 보겠다. 서버가 있으면 서버에서 데이터를 받아와서 보여주는게 일반적이지만 테스트를 위해 임시로 데이터 파일을 준비해 둔다. // info.js, 제품영양정보 [{ id : 1, title: "아메리카노", info: ['나트륨', '단백질', '포화지방','당류'], made: "없음", etc: "제공되는 영양 정보는 메뉴 기본 옵션 항목을 기반으로 하며 사용자별로 선택한 옵션을 반영하지 않습니다. 성인과 청소년(13세 이상)은 하루 평균 2,000칼로리가 필요하고 어린이(4~12세)는 하루 평균 1,500칼로리가 필요합니다. 그러나 개인에 따라 다를 수 있습니다." }, { id : 2, title: "라떼", info: ['단..

Frontend/Vue 2024.01.07

Vue v-if 모달창 만들기

화면을 개발할 때 자주 나오는 구성 요소 중 하나가 모달(Modal)창이다. 하나의 페이지에서 하나의 작은 다른 페이지를 띄우고 부가적인 일들을 처리할 수 있게 만드는 기능이다. 사용자로부터 특정 동작/메세지에 대한 주목이 필요할 때 모달을 사용한다. 팝업(Popup)과의 차이점 팝업은 새 브라우저 페이지를 띄우는 것 모달창 만들어 보기 1. html에 간단하게 모달을 열 버튼과 modal창을 위한 div영역은 잡아준다. 영양 정보/원산지 정보 제품 영양 정보(업데이트 예정) 1회 제공량 나트륨 단백질 포화지방 당류 제공되는 영양 정보는 메뉴 기본 옵션 항목을 기반으로 하며 사용자별로 선택한 옵션을 반영하지 않습니다. 성인과 청소년(13세 이상)은 하루 평균 2,000칼로리가 필요하고 어린이(4~12세)..

Frontend/Vue 2024.01.05

Vue 페이지를 여러개 만들고 싶을 때 vue-router

페이지를 여러개 만들고 싶을 때 라우터를 사용한다. /여기로 , /저기로 이렇게 페이지로 접속 할 수 있다. vue-router 라이브러리를 설치하고 이용해야 한다. 1. 라우터 셋팅 방법 npm install vue-router@4 yarn add vue-router@4 // 오류 생길시 실행하고 있던 npm run serve은 [Ctrl+C] 로 끄고 입력하길 권장함. 아니면 오류 생김. vue add router 2. 라우터 파일을 만들어 준다. src폴더 안에 router.js 파일을 만들고 아래 코드를 복사한다. import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/이동할경로", compone..

Frontend/Vue 2024.01.04

Vue 반복문 v-for

vue에서의 반복문은 v-for로 적는다. HTML에 반복되는 부분이 보이면 v-for을 쓰면 된다. 반복1 반복2 반복3 v-for 반복문 적는 법 1. 태그에 v-for="변수 in 반복할횟수" 를 적고 2. :key="변수" 를 추가한다. :key 속성은 반복한 요소들을 각각 구분하기 위한 속성이다. 반복 반복문을 사용할 때 array, object 데이터를 집어 넣을 수도 있다. data(){ return { List : ['반복A', '반복B', '반복C'] } } 이제 List 데이터를 반복문으로 수정할 수 있다. 반복시킬 횟수에 array자료를 집어 넣을 수 있다. {{ a }} 1. List 안의 개수만큼 반복된다. 2. 작명한 변수 a는 반복될 때마다 List 안에 있던 데이터가 된다. ..

Frontend/Vue 2024.01.03

Vue 서버로 ajax 요청하기

Ajax 요청을 하려면 axios를 쓰면 된다. 1. axios 터미널 설치 npm install axios yarn add axios 오류가 발생활 확률이 높음 검색해서 방법을 찾음 npm install axios --legacy-peer-deps //설치 오류 해결 2. GET, POST 차이 server에게 데이터를 요청하려면 url로 GET / POST 요청함 GET은 데이터를 가져올 때 사용하며 서버가 요구하는 URL을 사용하고 POST는 서버로 데이터를 보낼 때 사용하고 역시 서버가 요구하는 URL사용함. 3. 원하는 URL로 GET요청하기 import axios from 'axios'; axios.get('서버URL').then( 함수() => { // 요청 성공시 실행할 코드 }).catc..

Frontend/Vue 2024.01.02

Vue mitt 컴포넌트간 데이터 전송

mitt은 모든 컴포넌트 간 데이터 통신을 지원한다. 현재 작업의 경우 SizePrice.vue -> OrderPrice.vue 컴포넌트간의 데이터 전송이 필요했다. SizePrice.vue에서 데이터에서 받아오는 각 사이즈(S, M, L) 가격을 클릭하면 OrderPrice.vue에 보내주고, OrderPrice.vue 구매수량에 맞춰 총가격을 구하는 작업이다. (Vue2에서는 Event Bus을 이용해 멀리 있는 컴포넌트간 데이터를 전송했지만 Vue3에서는 사용이 불가해서 mitt 외부 라이브러리를 사용한다.) 1. mitt설치하고 main.js파일에 가서 mitt 설정한다. mitt 설치 npm install mitt 설치 후에 main.js파일에 가서 mitt 설정 import { createAp..

Frontend/Vue 2024.01.01