Vue3/코딩애플 part1

어떤 HTML 요소를 클릭했을 때 이벤트를 발생시키려면, 에서 "" 안에 자바스크립트를 넣는다.Vue에서는 이와 비슷하게 @click=""  을 이용한다. 실습하기 위해 [허위매물신고]란 버튼을 만들자 버튼을 누르면 신고 수가 1이 증가하는 기능을 만들어보자 일단 신고수 : 0 에서 0을 변수로 만들어야 한다는 것을 알 수 있다.데이터 보관소에서 변수로 등록 ㄱㄱ!count 라고 변수명을 지었다. 신고 전이니 0으로 초기화하자. data() { return { products : ['역삼동원룸', '천호동원룸', '마포구원룸'], menu : ['Home', 'Shop', 'About'], count : 0, } }, 이제 허위매물신고 버튼에 click 이벤트를 집..

📌V-for 반복문v-for="작명" in "반복할 횟수" :key="작명" 상단 메뉴바 3개를 for문을 이용해 출력해보자 Home 라고 작성하면 된다. 작명은 아무 작명하면 된다!  Home Products--> About--> {{products[0]}} 10만원 {{products[1]}} 20만원 {{products[2]}} 30만원  v-for 반복문에 array, object 데이터를 넣으려면?먼저 데이터 보관소에 데이터를 등록하자.menu 라는 데이터를 등록했다.  {{a}} Products--> About--> {{products[0]}} 10만원 ..

app.vue 파일 초기 셋팅에서 필요 없는 부분일 일단 지우자 template 영역에 빨간 줄이 그어지는데, 안에 내용이 없으면 오류로 인식한다. 아무 내용 채우면 된다 template : html 내용 담는 곳script : 자바스크립트 기능 담는 곳style : 스타일 지정  Vue의 데이터바인딩 문법1. 영역에data() { return { } } 를 추가하자. 데이터를 Object 형식으로 추가하면 된다.해당 영역을 Vue의 data 보관함, 변수 보관함이라고 생각하면 된다.  저 XX 영역에 변수를 넣고 싶다면? return 안에 오브젝트 형식으로 원하는 변수를 넣은 후, 안에 {{변수이름}} 이렇게 입력하면 된다. XX 원룸 {{price1}} 만원 ..

🔎 들어가기 전에나는 현재 코딩애플 1년권을 이용하고 있다.코딩애플 강의가 좋은 점은, 핵심만 빠르게 실전 중심으로 원하는 프레임워크, 라이브러리, 언어 강좌를 수강할 수 있다는 점이다.처음부터 너무 깊은 내용을 다루고 이론 중심으로만 공부하게 되면 금방 지치고 흥미가 떨어진다.코딩애플 강사님의 방식은 간단한 개념 설명 (근데 엄청 웃김) 을 한 후에 바로 실습을 하면서 이해시켜주는 방식이다.자바스크립트란 언어를 공부할 때 이론 위주로 된 사이트를 보며 공부를 했었는데 (물론 유용했음) 코딩애플의 자바스크립트 강의를 맛보기로 5-6개 들은 것만으로도 습득이 엄청 빨랐다. 유튜브에서 코딩애플의 맛보기 강의를 다들 들어보는걸 추천한다. 너무 웃기고 재밌다,,암튼 학창시절부터 꼼꼼하고 딱딱한 강의를 고집했었..