- Props 1)데이터는 한 곳에 보통 보관한다 (App.vue 같은곳) 그리고 필요하면 가져다 쓴다. 2)v-bind (축약은 :)를 이용해 이름 : "props할 데이터" 형식으로 넘겨준다. 3)props받은 컴포넌트쪽에 props등록을 해준다. 받은데이터이름 : 자료형인데 자료형은 디버깅용이라 틀려도 되지만 맞춰주도록 하자 ...... {{ a }} ....... export default { name: 'App', data(){ return{ modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false alert:[0,0,0], price1 : 60, price2 : 70, price3:80, prices:[60,70,80], 스타일 : 'color:bl..
- 여러 상세페이지 변수로 조작하기 아래 그림과같이 상세페이지가 여러개 있을 수 도 있다. 라우팅과 비슷하다고 볼 수도 있는데, 주소/0, 주소/1 주소/2 와같이 되어있을 때 뒤에 변수 0,1,2만 바꿔주면 하나의 템플릿으로 여러 페이지의 데이터 내용을 구현할 수 있다. {{ oneroom[roomNumber].title }} {{ oneroom[roomNumber].content}} 닫기 {{ a }} {{ i }} {{ a.title }} {{ a.price }}원 ....... data(){ return{ modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false oneroom:data, roomNumber:0, //import 해온것 } 이와같이 dat..
- 이벤트 핸들러 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 }..
- web-app을 만들 때 사용 1)부드러운 사용성 2)React와 Angular와 비교됨 3)일반적으로 Vue.js가 React.js가 좀더 쉽다고 한다. 4)코드를 짤 때 정확한 방법이 정해져 있다. (리액트는 되게 다양함) 코드 통일성의 장점! -> ex) 반복문의 경우 Vue는 v-for -> ex) 조건문의 경우 Vue는 v-if v-else - Vue 3환경세팅 1)Node.js 설치 (이미완료) 2)VScode 설치 (이미완료) 3)vue cli설치 (vscode 커맨드에서) : vue 프로젝트 빠르게 생성해주는 라이브러리 (npm 패키지) npm install -g @vue/cli 4)Vetur, Vue 3 Snippets 설치 5)이제 빈 폴더에서 vue 프로젝트 생성 vue creat..
원래 프론트엔드 공부할 때 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 시작..