웹(web)/프론트엔드-vue25 component props 컴포넌트 사용의 큰 이유는 재사용성이다. 이를 위해 함수 인자로 받는 방식과 유사한 props라는 속성을 정의하여 사용한다. 컴포넌트를 사용하는 부분에서 넘겨준 데이터를 사용하는 것이다. msg에 다음과 같이 4개의 값들을 사용했다. 1. type 은 props로 받을 데이터 타입을 의미한다. 다를 경우 콘솔에 에러 메세지를 출력한다. 2. default 은 컴포넌트 사용시 msg의 값이 할당되지 않으면 사용할 값이다. 3. required가 true이면 컴포넌트 사용시 msg props에 값을 넣어주어야한다. 값이 할당되지 않으면 콘솔에 에러를 출력한다. 4. validator은 유효성 검사를 위한 함수이다. value는 msg에 할당된 값이며 이를 이용해 필요한 검사를 실시한다. boolean 값을 .. 2020. 7. 9. vue data vue 데이터를 이전까지는 객체로 작성하여 사용하였다. 재사용이 되는 경우를 대비하여 함수로 사용하는 것이 권장된다. 그 이유는 추후 포스팅에서 다룬다. 2020. 7. 9. vue component hello world vue에서 컴포넌트라는 것이 있다. UI의 그룹이라고 불리는데 간단하게 살펴보고 넘어가자. 2020. 7. 9. @change, v-model+lazy,number,trim input에서 입력하는 순간순간 변경되는 것이 아니라 엔터를 치거나 focus가 사라졌을 때 변경되도록 하려면 어떻게 해야할까? @change에 핸들러를 붙이거나 v-model.lazy를 사용하면 된다. input text에서 입력된 value의 값이 있을 때 좌우측 공백을 제거해서 데이터에 반영하려면 어떻게 해야할까? v-model.trim 을 사용한다. input text에 입력된 value가 숫자인 경우에 자동으로 int형태로 캐스팅해서 데이터에 반영하려면 어떻게 해야할까? v-model.number를 사용한다. 아래 코드를 보면서 위의 설명을 확인하도록 하자. v-model은 양방향 바인딩이다. 2020. 7. 9. 이전 1 2 3 4 5 ··· 7 다음
