본문 바로가기
728x90
반응형

전체 글156

Vue 서버 데이터 통신 - Axios Axios Axios는 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신 라이브러리이다. Promise* 형태로 값을 return 한다. Fetch와 달리 구형 브라우저도 지원하고, 응답 시간 설정을 통해 네트워크 에러 발생 시 정해진 응답 시간을 초과하면 해당 요청을 종료시킬 수도 있다. Promise ? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 프로미스의 3가지 상태 Pending(대기) - 비동기 처리 로직이 완료되지 않음 new Promise(); new Promise(function(resolve, reject){ }); Fulfilled(이행) - 비동기 처리가 완료되어 프로미스가 결과 값을 반환 콜백 함수 인자인 .. 2023. 7. 30.
Vue 이벤트 처리 방법(v-on) Vue 컴포넌트에서 이벤트 처리를 할 때는 v-on 디렉티브를 사용한다. v-on 디렉티브는 심볼 @로 대체 가능하다. 클릭 이벤트(v-on:click) v-on:click="메소드명" 혹은 @click="메소드명" Add 1 count : {{ counter }} 클릭 이벤트를 통해 지정된 함수로 파라미터를 전달하고 싶다면, 다음과 같이 설정 Set 10 set : {{ number }} 클릭 이벤트 발생 시 여러 개의 함수를 호출하고 싶다면, Click Change 이벤트 @change="메소드명" 서울 부산 제주 Key 이벤트 엔터키가 입력되는지 감시하다가 엔터를 치면 조회 버튼이 눌리게 한다거나.. 이런것! 주로 사용하는 key 이벤트 .enter .up .tab .down .delete .lef.. 2023. 7. 30.
Vue 랜더링 문법(v-if, v-show) v-if 와 v-show 의 차이점 화면 내에서 자주 toggle이 일어난다면 v-show를 사용하는 것이 자원이 절약되고, 그렇지 않은 경우는 v-if 가 자원을 절약한다. 구분 v-if v-show 랜더링 방식 조건을 만족하는 순간에 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제된다. 즉, 조건에 맞는 경우만 랜더링 => 해당 블록에 toggle이 일어날 때 자원을 많이 사용(블록 전체를 생성했다가, 삭제) 조건 만족 여부와 상관없이 무조건 html 블록이 생성된다. 조건을 만족하면 css display를 이용해 화면에 보이는 것. 즉, 조건에 맞지 않아도 무조건 랜더링 => 처음에 자원을 많이 사용 v-if A B C v-show bShow가 true면 보입니다. 2023. 7. 30.
Vue 리스트 랜더링(v-for) 배열 데이터는 v-for 디렉티브를 이용해서 바인딩 할 수 있다. 형식은, v-for="(item, index) in items" 제품명 가격 배송료 {{ product.pname }} {{ product.price }} {{ product.delivery_price }} 2023. 7. 30.
Vue 여러가지 데이터 바인딩 문자열 데이터 바인딩 문자열은 '이중 중괄호'를 이용해서 데이터 바인딩 할 수 있다. Hello, {{title}}! raw(원시) HTML 데이터 바인딩 html 태그를 바인딩 할 때는 이중 중괄호 바인딩을 하면 안된다. html 태그가 아니라 문자열로 인식하게 되기 때문이다. html로 출력되게 하려면 v-html 디렉티브를 사용해야 한다. Form 입력 데이터 바인딩 input type = text input type=text의 경우 입력받은 텍스트는 value에 저장된다. v-model은 내부적으로 input type=text의 value 속성을 사용한다. data()에 정의한 데이터 키명을 v-model에 넣어주면, 양방향 데이터 바인딩 된다. //South Korea input type = n.. 2023. 7. 30.
728x90
반응형

티스토리툴바