Vue.js

이전에 정리한 글인 props와 emit에 정리하면서 v-model를 활용할 수 있다는 글을 보고 정리하고자 한다. 부모 컴포넌트와 자식 컴포넌트의 데이터 바인딩 코드의 재사용을 위해 컴포넌트를 분리하면, 부모 컴포넌트와 자식 컴포넌트의 데이터 바인딩이 필요하다. 부모 컴포넌트의 값을 자식 컴포넌트에게 내려준다. 자식 컴포넌트에서 값이 변경되면, 그 사실을 부모 컴포넌트에도 알려야한다. v-model 부모 컴포넌트 parent-compo {{number}} 부모 컴포넌트에서 v-model로 number라는 값을 내려주면, 자식 컴포넌트에서는 props로 데이터를 접근할 수 있다. 자식 컴포넌트 child-compo {{value}} Add 1 💫 단, v-model로 바인딩 한 값은props에서 valu..

1. props 란 ? : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식 2. 사용 방식 부모 컴포넌트에서 자식 컴포넌트를 호출시 자식 컴포넌트 태그 내 v-bind나 : 키워드를통해 데이터를 전달하고 자식 컴포넌트에서 props객체를 통해 데이터를 전달받는 방식이다. 1) 부모 컴포넌트 2) 자식 컴포넌트 부모 컴포넌트에서 보내고자 하는 데이터를 디렉티브를 적어 props이름을 설정한다. 그리고 보내고자하는 데이터를 이곳에 보낸다. 그리고 자식 컴포넌트에서 이를 props로 가져온다. 3) 예시 props: { listArray: { type: Array, required: true }, pageSize: { type: Number, required: fals..

v-if를 쓰면 항상 나오는 것이 v-show여서 궁금해서 정리해보게 되었다. 1. v-if : v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용된다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링된다. Vue is awesome! Oh no 😢 예시 Click me! Hello?! Good~ 코드 설명 button을 클릭시 isShow가 true면 Hello를 출력한다. false라면 Good~을 출력한다. 이는 클릭시 핸들러 함수를 설정하여 false면 true, true면 false를 출력하게 설정하였다. v-else-if, v-else A B C Not A/B/C → 조건이 여러개일 때 v-else-if를 설정한다. 그리고 나머지 조건은 v-else로 설정할 수 있다. 순서는..

vue는 이미 설치되어 실행하고 있기에 이는 생략하고 설명하겠다. 1. express 설치 1) express 설치 npm i express-generator -g 위의 명령어를 쳐서 설치해준다. 2) express 프로젝트 만들기 express backend --view=pug backend라는 express 프로젝트를 만들어준다. 3) express 실행 설치가 다 되었다면 backend폴더로 이동해준다. npm install 명령어를 쳐서 기본적인 모듈을 설치해준다. 즉 package.json에 있는 모듈을 설치해주고, node_modules를 설치해주는 것이다. 그리고 express가 잘 실행되는지 확인한다. 잘 되었다면 위와 같은 화면이 보이게 된다. 2. vue와 express 연결 1) 프론..

이전에 moment.js에서를 많이 사용했는데 요즘은 day.js로 많이 사용한다고 한다. 이전 배경 날짜 시간 계산을 하는 라이브러리는 moment.js를 사용한다. 발표한지 오래 지났다. 안정성의 이유로 더 이상의 업데이트가 없다고 밝혔다. 그러니, moment.js 사용시에는 문제가 없겠지만, 유지보수등의 문제가 생길 것으로 생각된다. 현재(day.js) 현재 많은 moment.js를 쓰던 사용자들은 day.js를 사용한다. 그래서 이에 대해 서술해보고자 한다. 1) 설치 npm i dayjs --save → 위를 쳐서 모듈을 설치하면 된다. 2) 현재 시간 가져오기 현재시간 : {{today}} 3)활용 현재시간 : {{today}} 연 : {{year}} 월 : {{month}} 일 : {{da..

이게 이해가 안되서 라이프 사이클과 여러가지 속성을 공부했다. 개념 created 인스턴스가 작성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. 그러나 마운트가 시작되지 않았으므로 $el 속성을 아직 사용할 수 없습니다. mounted el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출됩니다. 루트 인스턴스가 문서 내의 엘리먼트에 마운트 되어 있으면, mounted가 호출 될 때 vm.$el도 문서 안에 있게 됩니다. → 공식문서에 의하면 el사용여부로 둘을 분류할 수 있다. 화면 출력 부모에서 created 훅 안에서 값을 변경하는 것이 아닌 mounted에서 변경해야 한다. creat..

watch의 개념 :특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성 1. 사용법 👉 사용자가 input에 텍스트를 입력하면 data의 message에 데이터가 동적으로 바인딩이 된다. 👉 message: function (value) { console.log("value", value); } 사용자가 input에 텍스트를 입력할때 마다 message에 데이터가 동적으로 바인딩된다. watch는 message의 값이 변경이 발생될 때마다 watch의 message 메소드가 실행되어 console.log("value", value)가 실행 된다. 주의점은 감시할 타켓명이 watch에 동일한 이름으로 사용해야한다. data에 message를 감시할려면 watch에도 동일한 이름인 messa..

1. computed : 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성 아래 코드는 message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드이다. message 값이 만약 Hello라면 화면에 출력되는 값은 olleH로 된다. 이와 같은 계산식이 템플릿에 많아지면 템플릿의 가독성이 현저히 떨어지게 된다. 따라서 아래와 같이 computed 속성을 활용해야 한다. 1-1) computed의 사용 computed의 사용 전 {{ message.split('').reverse().join('') }} 이렇게 템플렛안에 기술하는 것이 더 편리하다. 그렇지만, 코드가 길어지면 길어질수록 점점 보기가 힘들어지고 복잡해지게 된다. 특히, 유지보수가 어려워지게 된다. computed의 사용 ..