Vue.js
-
mitt가 귀찮아서 쓰는 VuexVue.js 2022. 8. 3. 02:25
간단한 프로젝트에서도 데이터를 주고받기가 어려워서 Vuex를 사용한다. Vuex를 사용하면, js파일에 데이터를 다 몰아넣고, 모든 컴포넌트가 데이터를 직접 꺼내쓴다. 설치해보면, npm install vuex@next --save 설치하고, 데이터저장 공간을 만들어주고 다음과 같이 입력해준다. 여기선 store.js로 만들었다. //store.js import { createStore } from 'vuex' const store = createStore({ state(){ return { } }, }) export default store 그리고 main.js에서 등록을 해주면 된다. //main.js import store from './store'; app.use(store).mount('#app..
-
멀리 있는 컴포넌트간 데이터전송 mittVue.js 2022. 8. 2. 13:21
App.vue 밑에 Container.vue 밑에 FilterBox.vue에서 고른 필터를 Container.vue로 전달해서 해당 필터를 Container에 있는 이미지에 씌울 수 있는데, 필터도 중요한 data이기에 App.vue로 전달해서 data를 보관하려한다. 이럴 때 mitt라는 라이브러리를 사용한다. 먼저, yarn add mitt 설치해주고, 셋팅을 main.js에 //main.js import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' let emitter = mitt(); let app = createApp(App); app.config.globalProperties.emitter = emit..
-
props대신 쓰는 slotVue.js 2022. 8. 1. 20:41
slot은 부모에서 자식으로 데이터를 전송하는 props를 대신하는 문법이다. 부모에서 자식으로 데이터를 전송하려면, 먼저, 자식에 구멍을 뚫고,(slot태그를 적어주기) 부모에 컴포넌트를 적을 때, 이안에 내용은 slot에 들어감 이런 식으로 컴포넌트 태그안에 내용이 slot태그에 들어가게 할 수 있다. //부모 {{데이터}} //자식 이런 식으로 사용하면 데이터가 슬롯자리에 들어가게 된다. slot은 속성엔 사용할 수 없어서 그럴 땐, props를 사용해야 한다. 그리고 slot를 여러개 사용하려면 //부모 여기 데이터는 a자리에 감 여기 데이터는 b자리에 감 //자식 이런 식으로 사용하면 된다.
-
글 발행기능Vue.js 2022. 8. 1. 13:47
글 발행을 하려면 발행버튼을 먼저 만들어주고, 발행 publich함수를 작성해준다. publish(){ var 내게시물 = { name: "John Doe", userImage: "https://placeimg.com/200/200/people", postImage: this.이미지, likes: 20, date: "Apr 20", liked: false, content: this.발행할글, filter: "clarendon" }; this.instadata.unshift(내게시물); this.step = 0; } 기존 글과 같은 형태인 내 게시물이란 오브젝트를 만들어서, 원래 있던 data인 this.instadata에 unshift를 이용해서 맨앞으로 오게 뒷 내용을 밀어넣으면 된다. 그러면서 thi..
-
서버없이 업로드한 이미지다루기Vue.js 2022. 7. 29. 02:31
이미지업로드 한걸 html에 보여주려면 FileReader()을 쓰거나 URL.createObjectURL()을 사용하면 된다. + 이렇게 input태그로 type이 file이 되게 만들고, label태그를 이용해서 +를 누르면 사진을 업로드 할 수 있게 만들고, change 즉 변화가 감지되면 upload함수를 실행하게 한다. upload(e) { let file = e.target.files; let url = URL.createObjectURL(file[0]) this.step++; this.이미지 = url; } e.target.files로 업로드 된 파일들을 file변수에 담아주고, step++로 step을 1더해 탭을 이용한 페이지변경을 해준다. 그리고, url이라는 변수에 URL.create..
-
ajax로 더보기 버튼만들기Vue.js 2022. 7. 29. 01:03
보통 get, post요청을 하면 브라우저가 새로고침이 되는데, ajax를 이용하면, 새로고침 없이 가능하다. ajax요청을 하려면, 1. axios를 사용하던가, 2. 기본 fetch함수를 사용하던가 하면 된다. npm install axios 위처럼 입력해서 axios를 설치하고, import axios from 'axios'; 상단에 axios를 import해준다. 이렇게 더보기 버튼을 만들고, 더보기 버튼을 누르면 서버에서 추가 게시물을 가져오고, 그걸 로 보여주게 될 것이다. 더보기 이렇게 만들고, methods: { more() { //post는 //axios.post('url',{name: 'Lee'}) 이런 식으로 데이터를 url에 전송함 //.then은 성공시 .catch는 실패시임 ax..
-
라우터 나머지 기능Vue.js 2022. 7. 26. 01:56
route 초기설정 때 import { createRouter, createWebHistory } from 'vue-router' const router = []; const router = createRouter({ history: createWebHistory(), routes, }) 이렇게 설정을 했는데, history: createWebHistory() 이게 문제가 되는 경우가 있다. import { createRouter, createWebHashHistory } from 'vue-router' const router = []; const router = createRouter({ history: createWebHashHistory(), routes, }) 이처럼 설정하는건 Hash mode라..