뷰 및 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>

'Vue' 카테고리의 다른 글

Vue Router  (0) 2022.09.19
Vue 함수 구현 (computed / methods)  (0) 2022.09.06
Vue의 개념과 시작하기  (0) 2022.09.05

화면이 전환될 때, 전환하는 행위를 Route로 칭한다.

SPA 제작 시 뷰에서 제공하는 유용한 라우팅 라이브러리가 Vue Router이다.

 

1. vue-router 설치

> npm i --save vue-router

 

2. router.js 추가

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter); // vue 에서 vue router 를 사용하기 위해 알려줘야합니다.

const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/", component: Home },
    {
      path: "*",
      component: ErrorPage
    }
  ]
});

export default router;

 

3. main.js에 router 추가

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

 

4. App.vue에 router-view 추가

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

'Vue' 카테고리의 다른 글

vue - axios  (0) 2023.02.06
Vue 함수 구현 (computed / methods)  (0) 2022.09.06
Vue의 개념과 시작하기  (0) 2022.09.05

computed : 캐싱처리. message 값이 변경되면 호출한다. 값이 변경되지 않으면 이전의 값을 반환한다.

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

methods : 렌더링시 항상 호출한다.

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

 

'Vue' 카테고리의 다른 글

vue - axios  (0) 2023.02.06
Vue Router  (0) 2022.09.19
Vue의 개념과 시작하기  (0) 2022.09.05

■ Vue : 사용자 인터페이스를 구축하기 위한 JavaScript Framework

1) SFC (Single File Components) : 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방식으로 확장자 명이 vue인 파일을 SFC라고 한다.

2) SFC 구조 : <template /> <script /> <style />

 

 

 Vue 시작하기

1) NodeJS를 설치한다.

 - node.js? JavaScript 기반으로 구성된 서버 사이드 서비스를 JavaScript로 구현할 수 있게 만든 런타임

 - NodeJS를 설치해야 npm을 사용할 수 있다.

2) npm?

 - Node Package Modules로 node.js 기반의 모듈을 모아둔 집합 저장소로 개발자들이 Node.js 기반의 JavaScript로 개발된 오픈 소스를 모듈로 올려 놓는다. 따라서, 개발에 필요한 jQuery, Webpack등의 모듈을 npm 명령어를 통해 쉽게 다운받을 수 있다.

3) npm 명령어

 - npm i -g @vue/cli : 뷰 설치

 - vue --version : 뷰 버전 확인

 - vue create 프로젝트명 : 뷰 프로젝트 생성

 - npm run serve : 프로젝트 실행

 - npm run build : 프로젝트 빌드

 - npm i -g serve : 웹서버 설치 명령어

 - serve -s dist : 웹서버에서 빌드한 파일 실행

 

더보기

● 배포 전 테스트 방법

npm run build : 빌드 실행 -> dist 폴더 생성.

npm i -g serve : 웹서버 설치

serve -s dist : 웹서버에서 빌드한 파일 실행

'Vue' 카테고리의 다른 글

vue - axios  (0) 2023.02.06
Vue Router  (0) 2022.09.19
Vue 함수 구현 (computed / methods)  (0) 2022.09.06

+ Recent posts