쇼핑몰 검색 페이지 구현_Vue.js_2

1. 검색폼 구현_1

: 검색 상품명 입력 폼이 위치한다. 검색어가 없는 경우이므로 x버튼은 숨김! 검색어를 입력하면 x버튼 나옴!

 

 

우선 검색 폼이 나타나도록 JS에서와 마찬가지로 html에서 form 태그를 구현해주었다.

 

이렇게!!

 

그리고 app.js에서

msg를 지우고 query를 만들어줬다. 여기서 query의 역할은 입력 데이터를 받아서 저장하는 역할!!

 

그리고 html에서 input에 연결하기 위해 아래 그림처럼 v-model을 query로 생성해주었다.

 

데이터 바인딩이란 스크립트와 돔 사이의 데이터를 주고받는 과정을 의미한다.

v-model이란 뷰 인스턴스와 html간의 연결을 바인딩한다!! 즉, 뷰에서 양방향 바인딩을 가능하게 한다.

 

 

즉, 사용자가 입력을 하게되면 그 데이터는 query로 들어가게 되어있다... 그렇게 되면 버튼도 그 입력 데이터에 따라 보이게, 숨기게 할 수 있겠지!!

이럴때 사용하는 것이 v-show이다.

 

 

따라서 query.length를 통해 입력이 있으면 버튼을 보이게, 입력이 없으면 버튼이 숨겨지게 만들었다.

 

 

 

그 결과....

이렇게 아무 것도 입력하지 않으면 x버튼이 숨겨져 있고

 

입력을 하면 x버튼이 나타나는 것을 확인할 수 있다.

 

 

이렇게 vue.js에서 v model은 입력 데이터와 실제 인스턴스의 데이터 간의 바인딩을 하는 역할을 한다.

 

 

---

1. 검색폼 구현_2

: 엔터를 입력하면 검색 결과나 나온다.

 

 

form 태그에 v-on 을 사용했다.

v-on은 돔에서 일어나는 이벤트를 듣는 역할을 한다.

 

따라서 submit 이벤트가 발생했을 때, onSubmit이라는 함수가 바인딩되도록 작성해주었다.

 

 

이제 app.js에서 onSubmit을 뷰 인스턴스의 세번째 파라미터로 전달해준다.

methods라는 파라미터를 통해 실제 돔과 바인딩할 함수를 정의하는데..

우선 onSubmit에 debugger를 걸어두었다.

 

그러면 이렇게 디버거가 걸리는 것을 확인할 수 있다.

 

그리고 원래 목표였던!!! 디버거를 갱신하면 다시 창이 갱신되는 것을 확인할 수 있다.

따라서 화면 갱신도 막아주어야 한다...

 

보통은 onSubmit 함수에 e.preventDefault를 한다고 한다.

preventDefault는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드라고 한다.

 

 

 

하지만!! 뷰에서는 더 쉽게 한다!!!!

 

이렇게 v-on에서 실제 수신할 이벤트인 submit을 설정하고.. 거기에 prevent를 하면 preventDefault 와 동일한 역할을 한다!!

 

 

그러면 화면이 더이상 갱신되지 않는다!!!!!!!하....ㅎㅎㅎ

 

 

---

1. 검색폼 구현_3

: x버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제하자!

 

 

 

우선 버튼에 클릭 이벤트를 리슨하고 있어야 하겠지?? 그리고 함수와 바인딩을 시켜야겠다~~

 

 

input 태그에서와 마찬가지로 v-on에서 click 이벤트가 발생했을 때, onClick 함수가 바인딩 되도록 해주었다.

 

이제 app.js로 돌아와서 onSubmit 함수 아래에 onReset 함수를 작성하고

우선 입력한 문자열을 없애야 하기 때문에 this.query를 빈 문자열로 작성해주었다.

 

여기서 this는 뷰 인스턴스 자체를 의미하고 this.query를 하게 되면 data의 query를 의미한다.

 

 

 

 

이제 검색 결과를 숨기는 로직을 작성해야 하는데.... 우선 두고 목표로 했던 검색어를 삭제하면 검색 결과가 삭제되는 것까지 구현해놓자!!

 

 

입력과 관련이 있으므로 역시나 input 태그에서 v-on을 활용해서 keyup 이벤트가 발생했을 때, onKeyup 함수가 바인딩 되도록 해주었고

 

onKeyup 함수는 입력이 없을 때.. 즉 this.query의 length가 없을 때, onReset함수를 호출하도록 해주었따!!!

 

 

그러면 

 

이렇게 디버거가 잘 걸리는 것을 확인할 수 있따ㅎㅎㅎㅎㅎㅎ

 

 

검색 폼 구현 끝!!! 후.....