본문 바로가기

전체 글291

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.
form & v-model, @input input value에 양방향 바인딩을 하려면 어떻게 해야할까? 을 하면된다. v-model 사용시 한글이 바로바로 반영이 안되는데 어떻게 해야할까? 을 통해 데이터의 값을 변경해주면 된다. 핸들러에는 this.데이터이름 = event.target.value 코드가 포함되어야 한다. @input사용시 처음 렌더링 되면 초기값이 없는데 초기값을 Vue에 정의된 데이터 값으로 하려면? :value = "데이터이름"으로 단방향 바인딩을 해준다. 아래 예시를 통해 직접 확인해보면 된다. 2020. 7. 9.

티스토리툴바