dev_0hoon

자식에서는 부모의 state를 변경할 수 없다 (read-only)그래서 custom event를 통해 수정해달라는 메세지를 보내야 한다. vue에서 지원하는 변수가 있는데 $가 붙은 변수이다. $emit('작명',데이터) 형식으로 보내는데 데이터를 보내지 않으려면 $emit('작명')으로도 충분하다. 하위컴포넌트(자식) {{ 원룸.title }}이렇게 작명해서 메세지를 보내면 이렇게 작명한 메세지를 이벤트로 발생시킬 수 있다. 이게 자식이 부모의 state를 변경하는 방식이며,이것은 Custom Event 작성 방식으로 볼 수 있다. 만약$emit('작명',데이터)로 데이터도 보내서 사용해야 한다면  $event 해당 값을 사용할 수 있다.  ..

{{ 원룸.title }} {{ 원룸.price }}원  for문으로 이렇게 데이터를 뿌려줬다. 클릭할 때마다 상세내용이 나오면 좋겠는데 클릭한 컨텐츠가 보이면 좋겠다. export default { name: 'App', data(){ return { 누른거 : 0,'누른거'라는 state를 만들고 클릭하면 '누른거'에 id 값을 넣을 것이다. 그럼 모달창에서는 이렇게 보이면 된다.  {{ 원룸들[누른거].title }} {{ 원룸들[누른거].content }} 닫기     안녕하세요1 안녕하세요2 안녕하세요3 else는 바로 위가 참이 아니면 대신 작동한다.

var apple = 10;export default apple;apple.js App.vue  2개 이상은 이렇게 export default [{ id : 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/room0.jpg", content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공", price: 340000 }, { id : 1, title: "Changdong Aurora Bedroom(Queen-size)", image: "https://codingapple1.github.io/vue/room1.jpg", content: "침실만 따로 있는 공용 셰어하우스입니다..

탭, 햄버거, 모달창 다 같은 로직이다 export default { name: 'App', data(){ return { 모달창열렸니 : false, 상세페이지 상세페이지임  div에 v-if 조건식을 달면 true면 html이 보이고 false면 안보인다. {{ products[0] }} 원룸열때는 클릭시에 true  닫기

허위매물신고 신고수 : 0 허위매물신고 신고수 : 0 --- 축약형 export default { name: 'App', data(){ return { 신고수 : 0, products: ['역삼동원룸','천호동원룸','마포구원룸'], 메뉴들 : ['Home','Shop', 'About'], } }, components: { }}... 허위매물신고 신고수 : {{ 신고수 }} 버튼을 누를 때마다 신고수가 1씩 증가한다. 랜더링이기에 다시 html을 뿌리거나 하지 않아도 됌 @click뿐 아니라 @mouseover, @change 등 자유롭게 사용이 가능하다.  허위매물신고 신고수 : {{ 신고수 }} 이렇게 함수를 만들 수 있다 (javasc..

... {{작명}} :key를 안쓰면 오류가 남.- 반복문 요소를 컴퓨터가 구분하기 위해 사용 됌 {{a}}  a는 '메뉴들' 값의 메뉴이고 i는 하나씩 증가하는 값

document.getElementById().innerHTML = ??기존 자바스크립트 데이터 바인딩 문법  원룸 {{price1}} 만원 XX 원룸 {{ price2 }} 만원  vue.js에서의 데이터 바인딩 html tag 속성도 데이터 바인딩 가능 data(){ return { price1 : 60, price2 : 70, 스타일 : 'color : blue' } }, ... 원룸속성 앞에 :를 붙인다.