Hoon_developer Hoon_developer

front-end/Vue

• Vue router 사용하기

  front-end/Vue 2024. 4. 4. 16:39

  1. router 사용하기 npm install vue-router@4 2. src 폴데에 router.js 파일 만들기 import { createWebHistory, createRouter } from "vue-router"; import 컴포넌트 const routes = [ { path: "/경로", component: 컴포넌트, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; 3. Main.js 에 추가하기 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' import { createApp } from ..

  Read More
• Vue lifecycle hook

  front-end/Vue 2024. 4. 4. 13:11

  1. lifecycle hook 이란 - 각 단계마다 중간에 코드를 실행하고 싶을때 사용을 합니다. ex) 데이터 받아오기, 데이터 로딩중에 보여줄 화면 등 beforeCreate() created() beforeMount() mounted() beforeUpdate() updated() beforeUnmount() unmounted()

  Read More
• Vue watcher문법

  front-end/Vue 2024. 4. 3. 17:47

  1. Watcher 문법이란 - 데이터를 감시하는것이 가능합니다. - 비정상적인 데이터 값, 잘못된 입력값 확인 등 - 예시 코드 라면 {{ 5000 * num }} 원 2. 잘못된 입력값으로 인하여 NaN 원으로 계산되고 있습니다. 3. watch 코드 추가 watch: { num(a) { if (isNaN(a) == true) { alert('잘못된 입력'); this.num = 0; } }, },

  Read More
• Vue v-model 문법

  front-end/Vue 2024. 4. 3. 17:37

  1. V-model 이란? - 입력된 값을 data로 저장하는 vue 문법 - 과 똑같다. 2. 사용 예시 {{ menu }} {{ price * num }} 원

  Read More
• Vue module.css 사용하기

  front-end/Vue 2024. 4. 3. 16:36

  1. style 에 module를 적습니다. 2. class 태그를 :class를 붙이고 클래스명에 $style를 붙입니다. {{ menu }} {{ price }} 원 3. 결과 - 해당 css 속성에 고유값이 붙여서 해당 컴포넌트내에서만 작동을 하게 됩니다.

  Read More
• Vue Component 사용하기(props 전달)

  front-end/Vue 2024. 4. 3. 16:28

  1. MenuList.vue 파일을 하나 생성을 합니다. - vue 자동생성을 이용을 합니다.(안되는 경우 Vetur 설치) {{ menu }} {{ price }} 원 2. name를 설정을 합니다. export default { name: 'MenuList', } 3. app 파일에서 v-for문을 활용해서 들어갈 데이터를 만들어 봅시다. /*아래와 같은 것을 반복문을 사용한것 */ 4. MenuList 파일에서 props 설정을 해봅시다. - 자료형 종류 Array, Object, String, Number - props로 등록한것은 데이터 바인딩으로 자유롭게 사용 가 5. 결과

  Read More
• Vue if문법 v-if

  front-end/Vue 2024. 4. 2. 13:28

  1. 보여줄 모달창 만들기 죄송 품절입니다. 1. v-for v-if 사용하기 죄송 품절입니다. export default { name: 'App', data() { return { modal: true, menu_list: ['맛있는 붕어빵', '국물이 맛있는 오뎅', '매운맛 떡볶이'], price: [6000, 2000, 10000] } } }

  Read More
• Vue 반복문 v-for

  front-end/Vue 2024. 4. 2. 12:56

  1. 반복에 사용할 데이터 만들기 data() { return { menu_list: ['맛있는 붕어빵', '국물이 맛있는 오뎅', '매운맛 떡볶이'], price: [6000, 2000, 10000] } } 2. v-for 반복문 사용하기 내용 사용 예시 1) {{ menu_list[i] }} {{ price[i] }} 원 사용예시 2) {{ list }} {{ price[i] }} 원 3. 최종 코드 {{ list }} {{ price[i] }} 원

  Read More