Component5

• 

  [Vue.js] watch vs computed(데이터 변화 감지) 목차 데이터 변화 감지하는 점은 동일하지만 용도가 다름 watch 데이터의 변화를 감지하고 원하는 로직을 수행하는데 사용 주로 데이터 변화 시 비동기적 로직 등 복잡한 로직 수행 시 사용됨 변경 전 데이터, 변경 된 데이터를 매개변수로 받아서 처리 가능 카운트: {{ count }} 증가 new Vue({ el: '#app', data: { count: 0 }, methods: { increment() { this.count++; } }, watch: { //매개변수로 변경된 값, 변경 전 값을 받을 수 있음 count(newValue, oldValue) { console.log('count가 변경되었습니다. 이전 값: ${oldValue}, 새 값: ${newValue}'); //ajax 로직 생략.... IT/development 2023. 7. 30.

• 

  [Vue.js] 싱글 파일 컴포넌트에서 axios 통신 post 방식으로 데이터 전송 #ajax 통신 위한 lib 설치 npm i axios App.vue id: password: login get방식으로 데이터 조회 조회 queryString(?empId=dev&empNm=로다주&empEmail=dev@naver.com) 추가 시 아래처럼 사용 const data = { empId: this.empId, empNm: this.empNm, empEmail: this.empEmail } //2번 째 인자값에 위에서 만든 object 추가 axios.get(url, { data }) reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21471&tab=curriculu.. IT/development 2023. 7. 29.

• 

  [Vue.js] 싱글 파일 컴포넌트에서 event emit 속성 이용 App.vue app AppHeader.vue {{ propsdata }} send reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21466&tab=curriculum 학습 페이지 www.inflearn.com IT/development 2023. 7. 29.

• 

  [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 App.vue app AppHeader .vue {{ propsdata }} reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21465&tab=curriculum 학습 페이지 www.inflearn.com IT/development 2023. 7. 29.

• 

  [Vue.js] 컴포넌트(재사용 유용) 목차 컴포넌트 등록 전역 컴포넌트 등록(플러그인이나 라이브러리 형태로 사용 시) Vue.component('app-header', { template: ' {{ message }} 결과 Root 컴포넌트를 기준으로 계층구조를 이룸 image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org 부모 컴포넌트에서 자식 컴포넌트로는 props 속성으로 데이터 전달 자식 컴포넌트에서 부모 컴포넌트로는 event로 데이터 전달 통신 규칙이 있으면 데이터 흐름 추적이 용이함 reference: https://www.inflearn.com/course/age-of.. IT/development 2023. 7. 26.