전체 글
-
상품정렬기능과 데이터 원본보존Vue.js 2022. 7. 19. 13:31
원래 js로 상품을 정렬하려면 데이터를 정렬해주고, html에 반영해주세요 이 순서로 짜야하는데, vue에서는 데이터바인딩이 잘 되어 있다면, 데이터만 정렬하면 실시간으로 자동 반영이 된다. 가격순정렬 이렇게 버튼을 만들고, 함수 내용이 기니까, priceSort란 함수를 methods오브젝트에 만들어서 사용해보자. methods : { priceSort() { this.원룸들.sort(function(a,b) { return a.price - b.price }); }, }, 이렇게 this.원룸들에 sort함수를 붙여주면 문자정렬인데, 내부에 콜백함수를 넣어서 a-b를해서 음수면 a를 왼쪽으로 보내주는 기능을 이용해서 가격이 낮은 순으로 정렬해주게 된다. 원래대로 버튼도 만들어보자. data() {//..
-
vue의 UI애니메이션Vue.js 2022. 7. 19. 02:19
vue에서 애니메이션을 주는 방법엔 2가지가 있다. 먼저, css로 start라는 클래스를 미리주고, 거기엔 opacity : 0;과 transition: all 1s;을 주고, end라는 클래스를 모달창이 열릴 때 마다 부착해서 opacity : 1;로 만들어주면 된다. 위처럼 클래스를 부착할 땐, :class="{ end : true }"이렇게 오브젝트형식으로 넣을 수 있다. 그냥 :class="end"도 가능하지만, 오브젝트형식으로 넣어주면, 조건부로 사용할 수 있다. 즉, { 클래스명 : 조건 }으로 사용하며 조건이 참일 때만 클래스가 붙는다. 그래서 이런 식으로 적으면, 버튼을 눌러서 모달창열렸니가 true로 바뀌어 모달창이 열리면 자동으로 end라는 클래스가 부착되어 opacity가 0에서 1..
-
watcher로 데이터 감시Vue.js 2022. 7. 19. 01:40
input태그를 쓸 때, number로 초기값을 정했는데, string으로 넣을 때, 제한을 할 수 있다. 이럴 때, watcher를 사용하는데, watcher은 데이터를 감시하는 함수이다. data(){ return { month : 1, } }, watch : { month() { } }, 이렇게, data에 month라는 데이터를 감시하고 싶으면 watch안에 감시할 데이터 이름으로 함수를 만들어주면 된다. 감시라는건, month라는 데이터가 변할 때마다 위의 month함수의 코드가 실행된다는걸 뜻한다. 그래서 month()함수 안에 코드를 작성해보면 watch : { month(a,b) {//a는 변경 후 데이터, b는 변경 전 데이터 if (isNaN(a)==true) { alert('문자 입력..
-
사용자 input받기(v-model)Vue.js 2022. 7. 18. 02:32
input태그에도 @~ 이런 식으로 이벤트 리스너를 달 수 있다. 이렇게, @input="내용" 이러면 입력할 때마다 뭐 실행해주고, @change="내용" 이러면 다 입력하고 커서를 밖에 찍으면 실행해준다. 먼저 script태그 안에 data(){ return { month : 1, } }, 데이터를 month라는 이름으로 기본값 1을 저장해주고, month 라는 값에 $event.target.value를 적어주면 사용자가 입력한 값이 month에 저장된다. 여기서 $event는 js에서 e.target의 e와 같은 뜻이다. 그리고, {{month}}개월 선택함 : {{원룸들[누른거].price * month}}만원 이런 식으로, 데이터바인딩을 해서 바로바로 몇개월인지 알 수 있다. 그리곤, price..
-
custom eventVue.js 2022. 7. 18. 02:08
자식이 부모데이터를 바꾸고 싶을 때, 즉, {{원룸들[i].title}} {{원룸들[i].content}} {{원룸들[i].price}}만원 이렇게 ,@click으로 부모에서 props로 받은 데이터들을 변경시킬 땐, custom event로 메세지를 준다. 이렇다는건 props로 받아온 데이터는 read-only이기에 수정이 불가능하기 때문이다. custom event은 데이터 수정을 해달라는 메세지인데 메세지는 보내는 법과 수신하는 법이 있다. vue에서 $는 특별한 변수이며 내장함수를 사용한다는 뜻이다. $emit을 쓰게 되면 부모에게 메세지를 보내게 된다. @click="$emit('작명', 데이터)" 이런 식으로, emit안에 작명을 하고 데이터를 넣으면 메세지를 보낼 수 있다. {{원룸들[i]..
-
컴포넌트문법 (props)Vue.js 2022. 7. 14. 03:18
전에 만든 모달창처럼 코드가 길어지면 보기 싫으니 컴포넌트를 이용해서 만들어보자. 그리고 이제, 컴포넌트이름을 2단어 이상으로 만들어야 한다. 지금 결제하면 20% 할인 이런 div박스를 src폴더안에 Discount.vue파일을 만들어서 한글자로 쓸 수 있게 하자. 먼저, 지금 결제하면 20% 할인 이런 뷰파일 기본형식을 만들어서 그 안에, div박스를 넣어준다. 그리고, script태그 안에 name을 넣어주는게 일반적이다. 그래서 name : 'Discount'를 넣어줬다. 이제, App.vue파일에서 가져다 써보자. 쓰는 순서는, import해오고, 등록하고, 사용하면 된다. 그래서 script태그 안에 import를 해주고, components 안에 key : value형태로 가져온 value는..
-
모달창 상세페이지Vue.js 2022. 7. 14. 02:36
for문을 이용해서 데이터의 수에 따라 펼쳐진 상품들을 누르면 해당 내용에 관해 뜨는 모달창을 만들어보자. 내가 누른 것의 순서를 알 수 있는 데이터가 있어야하니, data() {//데이터 보관함 return { 누른거 : 0, 원룸들 : data, 모달창열렸니 : false, 신고수 : [0,0,0], 메뉴들 : ['Home','Shop', 'About'], products : ['역삼동원룸', '천호동원룸', '마포구원룸'], prices : [50, 60, 70] } }, 누른거 : 0이라는 데이터를 만들고, 제목을 누르면 누른거를 해당 제목으로 변경해주면 된다. 그래서 {{원룸들[i].title}} 이렇게, 누른거=i 라고 적어 해당 번호로 바뀌게 해준다. 그리고 {{원룸들[누른거].title}}..
-
실제 데이터 이용하기(import/export)Vue.js 2022. 7. 13. 01:49
데이터가 너무 길어지면 app.vue파일의 데이터 담는 공간에 담기가 너무 더러워진다. 그럴 경우, src폴더에 파일을 만들고 거기에 데이터를 적은 후에, export default 변수명 / import 변수명 from 파일경로 를 이용하던가 export {변수명1, 변수명2} / import {변수명1, 변수명2} from 경로 를 이용하면 된다. 그래서 mport data from './room.js'; export default { name: 'App', data() {//데이터 보관함 return { 원룸들 : data, 모달창열렸니 : false, 신고수 : [0,0,0], 메뉴들 : ['Home','Shop', 'About'], products : ['역삼동원룸', '천호동원룸', '마포구원..