공부/프론트엔드32 [PJ] Vue 공부중9 vue 단축..이모지? v-bind: = : v-on: = @ v-slot = # 컴포넌트에서 v-model 사용하기 TodoForm 에서 사용하던 Input Box 들을 Input 이라는 component로 따로 빼서 사용해보도록 한다. 공식 문서에서는 Multiple v-model 이라는 내용으로 찾을수 있다.(고 한다. 못찾음 ㅠ) TodoForm.vue ... Subject {{ subjectError }} ... Input.vue 로 form 옮기기 바인딩을 통해 데이터를 연결하고, 클릭이벤트도 연결해준다. Input.vue {{ label }} {{ error }} TodoForm.vue ... ... v-on 과 v-bind, 그리고 함수를 통해 변경된 값을 적용시켜 보았다. 이것을 v-mo.. 2022. 10. 19. [PJ] Vue 공부중8 slot 언제하지ㅣ.... Q. package-lock.json, package.json 은 gitignore를 해야 할까요? A. NOPE! https://chanie.tistory.com/m/10 node modules와 gitignore, package.json의 관계 node module을 사용하는 자바스크립트, 노드js, 리액트 관련 프로젝트를 할때 Create React App으로 프로젝트를 생성을 하면 기본적으로 gitignore파일에 node modules 경로가 잡히게 된다. 변경사항을 추적하 chanie.tistory.com https://blog.naver.com/gingsero/222140320340 package-lock.json 은 git ignore 처리해야할까? https:/.. 2022. 10. 5. [PJ] Vue 공부중7 Teleport 원하는 코드를 원하는 곳으로 이동 가능 index.html modal div 추가 pages/todos/index.vue style 투명도 추가 ... components/TodoList.vue index.html 에 있는 modal 로 이동시켜버림 모달이 위에 잘 뜸. API 연동 문제 - CORS - 해결 최 상단에 vue.config.js 파일 생성 module.exports = { publicPath: "./", devServer: { proxy : 'API URL' } }; Home.vue const getLists =async () =>{ try{ const res = await axios.get("/board"); console.log(res.data); } catch(err.. 2022. 10. 4. [PJ] Vue 공부중6 Vue Lifecycle hooks 공식문서 onUnmounted를 활용한 메모리 누수 관리 const timeout = ref(null); // 페이지를 벗어날 때 timeout value를 clear 해준다. // 그럼 페이지 이동시 triggerToast의 setTimeout이 실행되지 않음. onUnmounted(() => { clearTimeout(timeout.value); }); const triggerToast = (message, type = "success") => { toastAlertType.value = type; toastMessage.value = message; showToast.value = true; // 페이지를 벗어났을 때 아래 부분을 실행 시킬 필요 없다. timeo.. 2022. 10. 3. [PJ] Vue 공부중5 Todo Update submit 버튼으로 form submit 활용 template ... Save script const onSave = async () => { const res = await axios.put(`http://localhost:3000/todos/${todoId}`, { subject: todo.value.subject, completed: todo.value.completed, }); console.log(res); return { onSave }; }; 값이 잘 바뀌었다. JS 객체 복사/비교 js 자료형 : 원시 타입 - 값 자체 저장 , 참조 타입 - 메모리의 주소값 저장 lodash library 로 참조타입(객체) 값 비교! 수정시 데이터가 변동 되지 않았다면 save 버.. 2022. 10. 2. [PJ] Vue 공부중4 Vue Router 페이지간의 이동을 위한 패키지 설치 - vue3 는 vue-router4 버전 설치해야함 npm install vue-router@4 router-link 페이지를 리로딩 하지 않고 화면을 불러온다. 2022. 9. 29. 이전 1 2 3 4 ··· 6 다음
