본문 바로가기
반응형

VUE5

Vue.js API사용하기, props대신 mitt - axios 라이브러리 fetch나 여러 방식이 있긴하지만 json으로 바로 바꿔주는 편리함이나 장점 때문에 react에서도 axios를 주로 썼다. vue에도 당연히 적용되서 사용해보고 간략한 사용법을 기록한다. npm install axios해준다음 script부분에 먼저 import를 해준다. 2023. 4. 2.
Vue.js 이벤트 핸들러(v-on:click), 조건문(v-if) - 이벤트 핸들러 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.. 2023. 3. 29.
Vue.js CDN으로 간단하게 전체 맛보기 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()의 역할을 한다고 보면된다. 그리고 안에서 {{ 변수.. 2023. 3. 29.
Vue.js 데이터 바인딩, 반복문(v-for) - 데이터 바인딩 사용하는 이유 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 }.. 2023. 3. 28.
Vue.js 기본 입문 (Vue 2 설치) 원래 프론트엔드 공부할 때 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 시작.. 2023. 3. 28.
반응형

티스토리툴바