Front-end/Vue7 Vue3 기초: form data 다루기 웹어플리케이션에서 form을 이용한 데이터 바인딩은 필수적인 기술이라고 할 수 있다. 이를 통해야만 기본적인 로그인, 회원가입 등이 가능하기 때문이다. 또한, 클라이언트가 무엇을 원하는지를 서버가 알수있는 창구가 되어주기 때문에 form을 이용한 data다루기는 선택이 아닌 필수이다! 다행히 Vue에서 form data는 비교적 다루기 쉽다. Vue에서 제공하는 v-model을 input 태그에 달아주면 Vue가 알아서 양방향 바인딩(컴포넌트의 프로퍼티의 값을 바꿔줌과 동시에 view에 출력되는 값도 바뀐다.)을 해준다. {{ user }} 이름 나이 위와 같은 코드로 vue 서버를 올려보면 아래와 같은 화면을 볼 수 있다. 이름 옆의 input 창에서 이름을 바꾸면 위에 출력된 user 프로퍼티의 값도.. 2022. 2. 24. Vue3 기초: 조건부 리스트 렌더링 지난시간에 배열과 객체 등을 리스트로 화면에 그려내는 것까지 해보았다. 이번에는 for 반복을 통하여 리스트를 그려내되, 조건에 따라서 특정 항목들만 그려내는 방법에 대해서 알아보도록 하자. 단순히 이전에 공부했던 v-for와 v-if(혹은 v-show)를 함께 사용하면 되지 않을까? 라고 생각하였지만, vue3에서는 한 태그에 v-for와 v-if를 함께 사용할 수 없도록 해두었다. 공식 홈페이지에는 v-if와 v-for가 같이 쓰이면 v-if가 먼저 평가된다고 적혀있지만 실제로 해보면 그냥 에러난다 그렇다면 어떻게 반복을 돌면서 조건문을 적용할 수 있을까? 방법에는 여러가지가 있겠지만 2가지만 소개하겠다. 먼저, 고계함수를 이용하는 방법이 있다. 그중에서도 filter가 아주 효과적이라고 볼 수 있겠.. 2022. 2. 21. Vue3 기초: 리스트 렌더링 v-for를 이용하여 반복문을 사용할 수 있다. {{ fruits }} {{ index + 1 }}. {{ fruit }} 템플릿의 맨 윗부분에 머스태치 문법을 이용하여 배열을 바로 그리면 배열 자체로 나온다. 하지만 아래 li태그에 v-for와 같은 코드로 아래와 같이 화면에 반복적으로 그려줄 수 있다. 특이한건 bind되어있는 key속성인데, vue2에서와 vue3에서의 사용법이 살짝 다르지만 지금은 고유값(key)을 바탕으로 Vue의 가상 DOM트리에서 사용되는 값이라는 점 정도만 알고 지나가면 된다. vue2와 vue3에서의 key속성 차이를 알고 싶다면 여기서 확인하자 https://v3.ko.vuejs.org/guide/migration/key-attribute.html#%E1%84%87%E1.. 2022. 2. 16. Vue3 기초: 조건부 렌더링 태그에 아래와 같은 속성을 주어서 조건에 해당할 때만 해당 태그를 렌더링 하게끔 설정할 수 있다. v-if v-else-if v-else 또한 v-if 와 v-show 모두 조건부 렌더링에 이용되는 속성이지만 v-show는 조건에 맞지 않는 경우에도 엘리먼트는 화면에 그려진다. 다만, display속성을 none으로 주어 화면에 보이지 않는 것 처럼하는 것이고 이와 달리 v-if의 경우는 조건에 맞는 경우 화면에 새로 엘리먼트를 만들고 조건에 맞지않는 경우 화면에 그려진 엘리먼트를 삭제하는 다소 복잡한 로직으로 돌아가기 때문에 한 어플리케이션 내에서 자주 상태가 바뀌는 엘리먼트에 조건부 렌더링을 거는 경우에는 v-if 보다는 v-show를 이용하는 것이 퍼포먼스 측면에서 유리하다. 2022. 2. 14. 이전 1 2 다음
