3. Vue 서버와 요청할때에 기타 바인딩 - WastepaperBasket/Vue.js GitHub Wiki
- 다른 곳에서 쓸 것 같으면 컴포넌트
- 라우터로 나눌페이지도 컴포넌트
- HTML 너무 길어서 복잡? 컴포넌트 ····.
:style ="~" 집어넣을때 object 자료 가능!
참고!!
백틱기호로 문자만들면 `문자${변수}문자`
- axios 라이브러리
- fetch 함수
npm install axios
하고싶은 곳에
import axios from 'axios';
axios.get() / axios.post()
methods: {
more() {
axios
.get("요청할 URL")
.then(function (result) {
console.log(result.data);
});
// .then((result)=> {
console.log(result.data);
});
},
},
array function 을 써야 데이터 가공이 쉬워짐
data() {
return {
Vuestagram,
};
},
methods: {
more() {
axios
.get("https://codingapple1.github.io/vue/more0.json")
.then((result) => { //성공시 실행 코드
console.log(result.data);
this.Vuestagram.push(result.data);// 바인딩
});
},
},
axios.post('URL',{name : 'kim'}).then().catch((err)=>{
console.log(err)
})
-
FileReader() 를 쓰면 이미지를 글자로 변환할 수 있고 (글자니까 어디 저장하고 넣을 수도 있고)
-
URL.createObjectURL() 을 쓰면 이미지 URL을 잠깐 만들어줍니다. (다만 새로고침하면 사라짐)
(App.vue에 있던 Next 버튼)
<li v-if="step == 1" @click="step++">Next</li>
<li v-if="step == 2" @click="publish()">발행</li>
- unshift() 저거는 array에다가 데이터 하나 추가하는 자바스크립트 문법
publish() {
var myVue = {
name: "Park DoYoung",
userImage: "https://t1.daumcdn.net/cfile/tistory/992B1F335A12A45C11",
postImage: this.Image,
likes: 361,
date: "May 15",
liked: false,
content: this.작성한글,
filter: "perpetua",
};
this.Vuestagram.unshift(myVue);
this.click = 0;
},
- index.html에 추가하셈
- 그리고 필터를 쓰면되는데 필터부분은 뷰스타그램 중 filter.js 들어가보기
-
자식은 구멍뚫기
-
<컴포넌트> 태그 사이에 데이터 넣기 </컴포넌트>
그럼 props 왜 배움?
- 태그안에 데이터바인딩 할때만 slot 사용가능
원하는 곳에 <slot></slot>
<컴포넌트> 태그 사이에 데이터 넣기 </컴포넌트>
1. <slot name="a"></slot>
2. <template v-slot:a> 보낼거 </template>
npm install mitt
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 = emitter;
app.mount('#app')
- 데이터 보내고 싶은 곳
this.emitter.emit('이벤트명작명', '데이터')
- 데이터 받고 싶은 곳
this.emitter.on('이벤트명작명', (a)=>{
데이터수신시 실행할 코드
a는 출력해보면 데이터나옴
})