- 여러 상세페이지 변수로 조작하기 아래 그림과같이 상세페이지가 여러개 있을 수 도 있다. 라우팅과 비슷하다고 볼 수도 있는데, 주소/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()의 역할을 한다고 보면된다. 그리고 안에서 {{ 변수..