programming/Vue (14) 썸네일형 리스트형 [Nuxt] Vue 페이지나 컴포넌트에서 분리된 공통 함수 사용하기 제목을 어떻게 지어야할 지 고민이었다. 물론 방법을 찾는 과정에서도 검색어를 뭐라고 해야할지도 고민이었다. 일단 하고싶은건, 로컬 변수를 쓰는 페이지나 컴포넌트 내부에 공통으로 자주 쓰이는 함수를 common 화 하는 것이었다. 이전에는 흔하게 functions/common.js 이런식으로 자주 사용되는 함수들을 죄다 모아놓던가 했었다. 함수 별로 각각 사용되는 매개변수들을 일일히 정의하고 넘겨주는 것은 덤이요,,, 최종적으로 선택해서 사용한 방법 Mixins) redirect to 👉 https://tacit.tistory.com/166 [Nuxt] (mixins 사용법) vue 페이지나 컴포넌트에서 분리된 공통 함수에서 this 사용하기 [Nuxt] Vue 페이지나 컴포넌트에서 분리된 공통 함수 사용.. [Vue] 하위 input 컴포넌트에 상위 data 연결 (emit & v-model) [TODO] - page/test.vue test 페이지 안에서 form 데이터들(name, phone, email 등등) 을 변수로 관리하고, 그 데이터들을 모아서 백엔드로 전달 input 태그 가 특정 컴포넌트로 쌓여서 template에 바로 쓰이지 않고, 하위 컴포넌트 안에 들어가야함 [SOLUTION#1] - emit으로 하위 컴포넌트 데이터(e.target.value) 를 상위 컴포넌트(page/test.vue) 로 전달 # 상위 컴포넌트 (pages/test.vue) # 하위 컴포넌트 (components/SearchInput.vue) search [SOLUTION#2] - v-model 사용 # 상위 컴포넌트 (pages/test.vue) # 하위 컴포넌트 (components/SearchI.. [Vue] textarea 조건부 랜더링시 focus 이동 안되는 케이스 해결 -> $ref.focus() & nextTick() 메소드 [TODO] 입력 Form 에서 사용자가 Yes / No 중 Yes 라고 답하면 상세 내역을 적기 위한 textarea 를 보여주어야 한다 [WHAT I DONE] - "YES" 버튼을 클릭시 setAnswerY 메소드를 실행하여 this.answer_y = true 로 세팅 - this.answer_y 값이 true 이면 - textarea 요소가 보이고 focus 도 자동으로 이동 [첫번째 시도] setAnswerY() { this.answer_n = false this.answer_y = true // 마우스 커서 이동 this.setFocus('inputText') }, setFocus(item) { this.$refs[item].focus() }, ✔️ 결과 answer_y=true 로 바꾸는.. [Vue.js] #11 네비게이션 바(NavBar) 만들기 [specific concept] 1. 조건에 따라 class 값 추가/제거 - isOpened라는 boolean 변수의 값에 따라 open 추가/없음 토글 됨 - @click 속성으로 toggleMenu 함수 실행됨 [예제 코드] 1. /componets/NavBar.vue 만들기 HOME About Users About Users 2. App.vue 템플릿 상단 NavBar 추가하기 [실행결과] [Vue.js] #10 vue-router 데이터 전달하기 (params, props) 1. main.js props로 받겠다 true 설정 import { createApp } from 'vue' import { createWebHistory, createRouter } from 'vue-router'; import App from './App.vue' // router 쓰일 Component import Home from './views/Home.vue'; import About from './views/About.vue'; import User from './views/User.vue'; import UserDetail from './views/UserDetail.vue'; //routes 정하기 const routes = [ { path : '/', component: Home, n.. [Vue.js] #9 vue-router 사용하여 메뉴 navigation 링크만들기 1. view 폴더생성 2. 페이지 생성(About.vue, Home.vue, User.vue, UserDetail.vue) // About.vue 내용 (Home, User, UserDetail 모두 동일) About 3. main.js : routing 내용 설정 import { createApp } from 'vue'; import { createWebHistory, createRouter } from 'vue-router'; import App from './App.vue' // router 쓰일 Component import Home from './views/Home.vue'; import About from './views/About.vue'; import User from './views/U.. [Vue.js] #8 css에서 vue 제공 변수 사용하기 computed 안에서 지정한 color 값을 css에서 받아와서 표현하기 그냥 조건에 따라 color 값을 바꾸고 싶을 때 v-bind를 사용한다 [예시코드] {{ name }} {{ birth }} {{ compareBirth }} {{ compareBirth }} [실행결과] [Vue.js] #7 computed, methods 차이점 1. computed : 뷰에서 제공 - 캐시가 가능함 - 호출시 이전에 계산했던 것을 사용 - console.log 찍힌 횟수를 확인해보자 - 호출시 compareBirth 형태로 호출 {{ name }} {{ birth }} {{ compareBirth }} {{ compareBirth }} [실행결과 (computed)] 2. methods : 뷰에서 제공 - 캐시가 안됨 - 호출시 매번 연산 - console.log 찍힌 횟수를 확인해보자 - 호출시 compareBirth() 형태로 호출 {{ name }} {{ birth }} {{ compareBirth() }} {{ compareBirth() }} [실행결과(methods)] [Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기 1. 프로젝트 내에 components/Card.vue 파일 생성 # components/Card.vue {{ name }} {{ description }} 2. 프로젝트 내에 components/CardList.vue 파일 생성 # components/CardList.vue 3. 최상위 컴포넌트 App.vue 수정 # App.vue 4. 원하는 이미지 파일 넣기(loki.png, thor.png) /public 폴더 밑에 이미지 파일 추가 5. 최종 파일트리 6. dev 서버 돌리기 npm run dev [실행 결과] [Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기 https://vitejs-kr.github.io/guide/ 시작하기 | Vite 시작하기 들어가기 전에 Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 vitejs-kr.github.io vite로 시작하기 (Vue 에서 권장) $ npm create vite npx: 6개의 패키지를 3.697초만에 설치했습니다. √ Project name: ... Vue-Study √ Package name: ... vue-study √ Select a framework: » vue √ Select a variant: » vue Scaffolding project in C:.. 이전 1 2 다음
