WEB/Vue.js6 [Vue] Axios Axios HTTP통신 : axios Vue에서 권고하는 HTTP통신라이브러리 *Promise기반의 HTTP통신 라이브러리이며 다른 HTTP통신 들에 비해 문서화가 잘되어 있고 다양한 API 존재 *Promise - 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직처리에 유용한 자바스크립트 라이브러리 - 데이터 요청 후 받아올때까지 기다렸다가 화면에 나타내는 로직을 실행할때 주로 사용 axios대표 API API유형 처리결과 axios.get('URL').then().catch() 해당 URL 주소에 대해 HTTP GET요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then()안에 정의된 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 실행 axio.. 2022. 5. 11. [Vue] Vue Component Vue Component 컴포넌트(Component) Vue의 가장 강력한 기능 중 하나 HTML Element를 확장하여 재사용 가능한 코드를 캡슐화 Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용 Life Cycle Hook 사용가능 전역컴포넌트와 지역컴포넌트 존재 전역컴포넌트 등록 ** 케밥표기법 : 케밥이 꽂혀있는것처럼 -를 이용하여 이름을 표기, 전부 소문자 지역컴포넌트 등록 Component Template {{msg}} Component Data 공유 전역변수와 지역변수에 따른 Data공유 - count 가 전역일 경우 컴포넌트 데이터 공유 문제 {{ count }} 클릭 - count 가 지역일 경우 컴포넌트 데이터 공유 문제 해결 {{ count.. 2022. 5. 10. [Vue] Vue event Vue event Vue event - Dom Event를 청취하기 위해 v-on directive를 사용 - method를 이용한 event handling - inline event handling v-on - v-on directive를 사용하여 DOM이벤트를 듣고 트리거가 될 때 JavaScript를 실행할 수 있다. 클릭 위 버튼을 클릭한 횟수는 {{counter}} 번 입니다. method event handler - 이벤트 발생 시 처리로직을 v-on에 넣기 힘들기 때문에 이벤트 발생 시 처리해야 하는 method의 이름을 받아 처리 Greet inline method handler - 메소드이름을 직접 바인딩 하는 대신 인라인 JavaScript구문에 메소드를 사용할 수도 있다. - 원본 .. 2022. 5. 10. [Vue] Vue Instance Vue Instance속성 Vue method - method안에서 data는 "this.데이터이름"으로 접근 가능 data : {{message}} method kor : {{helloKor()}} method eng : {{helloEng()}} * method안에서도 함수끼리 접근할땐 this.키워드를 사용한다. body> method test 아이디 이름 등록 filter - 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능 - 중괄호보간법( {{ }} ) 또는 v-bind속성에서 사용가능 결과 : {{ msg | count1 }} {{ msg | count2('문자를 넣어보세요') }} 금액 : 전화번호 : {{ msg1 | price | won }} {{ msg2 | mobile }} co.. 2022. 5. 10. [Vue] Vue Directive Vue Directive 보간법(interpolation) 문자열 - 데이터 바인딩의 가장 기본형태는 "Mustache"구문 (이중 중괄호)을 사용한 텍스트 보간 - v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행 실습1 : v-once 사용 {{message}} {{message}} -> message데이터 수정 시 v-once 디렉티브를 사용한 h2구문은 변하지 않은것을 확인할 수 있다. (참고로 수정은 Vue.js devtools라는 구글확장프로그램을 사용하였다) 원시 HTML - 이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석 - 실제 HTML을 출력하려면 v-html 디렉티브를 사용 실습2: v-html 디렉티브 통해 html 구문 출력 ( 해당.. 2022. 5. 4. [Vue] Vue.js란 Vue.js Vue.js Evan You에 의해 만들어짐 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 progressive Framework Vue.js특징 - Approachable (접근성) - Versatile (유연성) - Performant (고성능) MVVM Pattern Model + View + ViewModel Model : 순수 자바스크립트 객체 View : 웹페이지의 DOM ViewModel : Vue의 역할 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 JQuery와 같은 라이브러리를 이용하였으나, Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 한다. 실습 1 : Hello VueJS 출력하기 {{messa.. 2022. 5. 3. 이전 1 다음
