📌 애니메이션 효과 주기CSS로 애니메이션 효과를 주려면1. 시작전 class 명2. 애니메이션 끝난 후 class명3. 그리고 원할 때 2번 class명 부착4. 시작전 class 명에 transition 속성을 주면 부드럽게 애니메이션이 완성된다. .start .end 에 대한 스타일을 미리 만들어 놓고, 모달창이 열렸을 때만 .end 클래스를 부착한다. (CSS).start { opacity: 0; transition: all 1s;}.end { opacity: 1;} HTML 속성에 데이터바인딩하려면:속성="데이터이름" class 명을 조건부로 넣으려면 => 조건이 true 일 때 클래스명이 부착된다 ex):class=" { end: true } "end라는 클래스명이 항..
vue
📌 input 데이터 값 받아오기Modal.vue 에서 input 을 넣어보자 {{prodList[prodId].title}} {{prodList[prodId].content}} {{prodList[prodId].price}} 원 닫기 가격 위에 input 창이 생겼다. 저 input 창에 숫자(개월)을 입력하면 개월 수만큼 곱해진 가격이 노출되게 만들어보자. 먼저 개월을 담을 데이터를 생성해야 한다.데이터 보관함에 month 를 초기화 한다.초기값 설정을 아무렇게나 하면 안 되고 알맞은 데이터로 해야 한다.(ex. textarea 라면 문자로 초기화를 해야 한다. 숫자로 초기화하면 안됨) data() { ..
📌 custom event자식 컴포넌트가 부모 컴포넌트가 가진 데이터를 바꾸고 싶다면 부모에게 메시지를 줘야 한다.부모는 그 메시지를 수신하면 데이터를 변경하는 코드를 실행한다.이걸 custom event 라고 한다. 1. 자식은 $emit(작명, 전달할 자료) // 전달한 자료는 선택사항. 작명은 필수 => 커스텀 이벤트 전송2. 부모는 @작명="데이터 변경하는 JS 코드"3. 부모 컴포넌트가 전달한 자료를 사용할 때는 $event 로 사용 가능 자식 컴포넌트에서 openModal 이라는 커스텀 이벤트 전송, prodData의 id 값을 전송//자식 컴포넌트{{prodData.title}} 부모 컴포넌트에서 @openModal 로 커스텀이벤트를 받고, prodId라는 데이터에 자식 컴포넌트에게 받은 ..
📌 PropsApp.vue 안에 Modal.vue 라는 파일이 하위 컴포넌트로 있다고 하면,App.vue 는 부모 컴포넌트, Modal.vue는 하위 또는 자식 컴포넌트라고 한다. 자식 컴포넌트가 부모 컴포넌트의 데이터를 쓰려면 props 라는 문법을 이용해야 한다.// 부모 컴포넌트에서 예시 코드에서는 로 작성하면 된다. 그리고 나서 자식 vue 파일에서 props 등록을 해야 한다.// 자식 컴포넌트에서props: { {작명}: 데이터타입 } props: { prodList: Array } 데이터 타입은 Array, Object, String, Number 등이 있다. 보내는 자료형에 맞게 입력하면 된다. 이제 props 로 등록한 데이터는 HTMl 안에서 데이터 바인딩으로 자유롭게 ..
📌컴포넌트 파일명 한 단어로 하기컴포넌트 파일을 만들 때, 두 단어 이상으로 만들지 않으면 에러로 인식한다 (ex. Product.vue (X) / ProductList.vue (O))한 단어로 파일명을 만들고 싶을 때 아래와 같이 하자 package.json 파일을 열어서 rules 라는 항목에 다음과 같이 추가하면 된다.⚡추가 한 다음 npm run serve 가 돌아가고 있다면 종료하고 다시 실행해야 한다. 실습할 때 두 단어 이상으로 작명하는 것이 은근 귀찮다."rules": { "vue/multi-word-component-names": "off"} 에러가 사라졌음을 확인할 수 있다. 📌 Vue 의 컴포넌트원하는 HTML 덩어리를 한 글자로 축약할 수 있게 도와주는 문법이 컴포넌트이다...
📌상품명을 클릭 > 모달창 노출 > 모달창 안에 상세 내용 노출되도록 만들기N 번째 상품의 상품명을 누르면 그 상품의 내용이 모달창에 노출되도록 해보자. {{a.title}} {{a.title}} {{a.price}}원 허위매물신고 신고수 : {{count[i]}} a.title 이 상품명 영역이다.상품명을 눌렀을 때 해당 상품이 몇번째 index 인지는 i 에 저장되어있다.그 i 를 알아야하니 prodId 라는 변수를 만들어 i를 저장한다.(데이터보관함에 prodId 라는 변수를 만들고 초기화해야 한다.)data() { return { menu : ['Home', 'Shop', 'About'], count : [0,0,0,0,0,0], ..
앞전까지의 데이터는 하드코딩 그 자체의 데이터이다. 실제로 개발을 하면 데이터는 모두 API 로 받아오게 된다.하지만 프론트엔드 강의이니 데이터를 다른 파일에 저장해 놓고 그 파일의 데이터를 불러오자. [{목록1}, {목록2}, {목록3}, ...] 형태의 데이터를 prodData.js 파일에 저장 하자.각각의 {목록} 데이터에는 id, title, image, content, price 가 들어있다.Array 형태의 데이터틀에 Object 데이터가 들어있는 형태이다. 위의 id, title .. 등의 값은 Object의 key 값이 되겠다. JS file 을 새로 만들고 해당 파일에 긴 데이터를 입력하고 저장하자. 📢 export default / import 문법어떤 js 파일에서 만든 변수나 자..
📌이미지 넣는 법이미지를 src 폴더 아무데나 넣고img src="./경로"> src 폴더에 있는 것을 가져올 때는 경로를 ./ 로 시작하면 된다. 만약 이미지를 public 폴더에 넣을거면 /경로 로 해야한다.public 폴더에 넣으면 나중에 발행할 때 이미지가 이름이 변하지 않는다.src에 있는 이미지는 임의로 바꿔준다. ▼ public 관련 참고https://onlynana.tistory.com/entry/Vue%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8Cpart2-7-build-Github-pages-%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#%20%E2%9A%A1%20build%20%ED%95%A0%20%EB%95%8C%20%EC%..
어떤 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만원 ..
