dev_0hoon

.start{ opacity : 0; transition: all 1s;}.end{ opacity : 1;}위의 코드를 보면 :class 라는 속성이 있다 :를 이용해 v-bind 상태로 사용할 수 있는데 end 라는 클래스가 true면 동작하게 끔사용할 수 있는 것이다. vue 에서는 transition을 쉽게 사용할 수 있는 태그를 제공한다. 태그의 name 속성은 편한데로 작명하면 된다.여기에서는 fade로 작명했다..fade-enter-from{/*시작*/ opacity:0;}.fade-enter-active{ /*transition*/ transition : all 1s;}.fade-enter-to{/*끝*/ opacity:1;}3개의 정해진 클래스를 css해야한다. 이건 룰이기에..

vue.js에서 $event는 javascript의 eventListener같은 존재이다. 클릭,체인지 등의 이벤트를 만들때에 이벤트요소 이다. function안의 e와 같은 일을 한다고 보면 된다. $event.target.value 라고 입력하면, input에 입력한 값이 된다.  이렇게하면 month에 값을 넣을 수 있다.  v-model은 input에 입력한 값을 month에 넣어주세요.라는 명령어 이다.(축약버전)  123 1124 11 다양한 방식으로 가능하다. 참고로 v-model로 들어가는 값은 모두 문자로 들어가게 된다. {{ month }} 개월 선택함 {{ 원룸들[누른거].pri..

자식에서는 부모의 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..