vue - axios

뷰 및 axios 설치. 실행

npm init
npm i
npm i -g npm@latest
npm i -g @vue/cli
npm i axios

npm run serve

 

- axios를 통해 서버단 다녀오기 axios.get(url)~~~

axios.get(url).then((res) => {
	console.log(res)  
}).catch((err)=>{
	console.log(err)
})

- axios를 통해 데이터도 함께 보내기 axios.post(url,{data})~~~

axios.post(url,{
    A: 'dataA',
    B: 'dataB'
}).then((res) => {
	console.log(res)  
}).catch((err)=>{
	console.log(err)
})

 

methods: {}로 서버단으로 전송,

mounted(){}는 페이지 로딩과 동시에 실행될 수 있게 해줌.

data(){}를 통해 값을 화면으로 보여줄 수 있음.

<script>
import axios from 'axios'

export default {
	name: 'App',
	data(){
		return {
			name: ''
		}
	},
	methods: {
		test(){
			const url = '/api/test'
			axios.get(url).then((res) => {
				this.name = res.data.name
			}).catch((err) => {
				console.log(err)
			})
		}
	},
	mounted(){
		this.test()
	}
}
</script>

뷰단에 데이터 보이도록!

<template>
	<div>
		{{ name }}
	</div>
</template>

뷰단에서 입력한 값 서버단으로 보내기!

v-model을 이용하면 scripte단에서 this.____으로 입력값을 가져올 수 있다.

클릭이벤트 거는 방법. href="javascript:;" @click.prevent='메서드명'

<template>
	<div>
		<input type="text" v-model="name">
	</div>
	<div>
		<button href="javascript:;" @click.prevent="test">버튼클릭</button>
	</div>
</template>

<script>
import axios from 'axios'

export default {
	name: 'App',
	methods: {
		test(){
			axios.post('/api/test',{
				name: this.name
			}).then(res) => {
				console.log(res)
			}).catch((err) => {
				console.log(err)
			})
		}
	}
}
</script>