- axios 라이브러리 fetch나 여러 방식이 있긴하지만 json으로 바로 바꿔주는 편리함이나 장점 때문에 react에서도 axios를 주로 썼다. vue에도 당연히 적용되서 사용해보고 간략한 사용법을 기록한다. npm install axios해준다음 script부분에 먼저 import를 해준다.

- 이벤트 핸들러 HTML 클릭시 코드 실행하는 법 버튼클릭시 이벤트를 발생시키려면 v-on:click을 사용해줘야한다. @click으로 축약할 수 도 있다. 직접 변수를 변화시켜줘도 되지만 methods에 함수를 만들어줘 사용하는게 일반적이고 함수안에서 변수를 조작할 시에 this키워드를 사용해 줘야한다. {{ a }} {{prices[i] }} 허위매물신고 신고수 : {{ alert[i] }} .......... data(){ return{ alert:[0,0,0], price1 : 60, price2 : 70, price3:80, prices:[60,70,80], 스타일 : 'color:blue', products: ["은평구원룸",'천호동원룸','마포구원룸'], 메뉴들 : ["Home","Shop..

https://vuejs.org/guide/quick-start.html#creating-a-vue-application Quick Start | Vue.js vuejs.org - 설치하기 cli가 아니라 CDN을 이용해서 간단하게 튜토리얼을 맛보았다. 해당링크로 들어가면 확인할 수 있다. - VScode html파일에 설정하기 간단하게 html파일 보일러플레이트 하나 생성해주고 Quick Start중간쯤에 있는 소스코드를 html파일에 넣어준다. {{ message }} - Vue.js 간단하게 둘러보기 1.데이터 바인딩 (data, input) Vue.js는 데이터 바인딩할 때 data(){} 안에다가 넣어주면된다. React에서 useState()의 역할을 한다고 보면된다. 그리고 안에서 {{ 변수..

- 데이터 바인딩 사용하는 이유 1)당연히 변수를 사용하기 위함 2)Vue의 실시간 자동 렌더링 쓰려고 3)자주 변할거 같은 데이터들은 data()에 보관해서 사용 4)script쪽에 data(){}로 데이터 저장해서 사용한다. 5)HTML속성 역시 데이터 바인딩으로 사용이 가능하다. ( :속성="데이터이름" ) {{ products[0] }} {{ price1 }} 만원 {{ products[1] }} {{ price2 }} 만원 {{ products[2] }} {{ price2 }} 만원 - v-for 반복문 v-for="작명 in 숫자,aaray,obect" :key="작명" 1)array/object집어넣기 가능 그럼 자료안의 데이터 갯수만큼 반복됨 2)숫자넣으면 숫자만큼 반복됨 {{ name }..

원래 프론트엔드 공부할 때 HTML, CSS, Javascript 공부한뒤에 -> Vue.js -> React.js 순으로 공부했는데 Vue.js를 마지막으로 공부한게 시간이 좀되서.... 한번 전체적으로 싹 공부를 해보려고한다. 오늘은 간단하게 한번 정리만 해보도록한다. - Vue.js는 웹프론트엔드 프레임워크 1)컴포넌트 기반의 SPA를 구축할 수 있게 해주는 프레임 워크 -컴포넌트 1)웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹페이지 내의 다양한 UI요소 2)재사용 가능하도록 구조화 한 것 -SPA(Single Page Application) 1)단일 페이지 어플리케이션 2)하나의 페이지 안에서 필요한 영역 부문만 로딩 되는 형태 3)빠른 페이지 변환 4)적은 트래픽 양 -Vue cli 시작..