웹페이지 간의 이동 방법
화면 간의 전환이 매끄러울 뿐만 아니라 UX 경험을 향상 시킬 수 있다.
<router-link to="URL값"
페이지 이동 태그.
화면에서는 <a>
로 표시되며 클릭하면 to에 지정한 URL로 이동한다.
<router-view>
페이지 표시 태그
변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역(갱신되는 화면영역)
// 각 URL에 맞춰 표시할 컴포넌트 지정
var routes = [
{path: '/main', component: Main},
{path: '/login', component: Login}
];
// 뷰 라우터 정의
var router = new VueRouter({
routes
});
// 뷰 인스턴스에 라우터 추가
var app = new Vue({
router
}).$mount('#app');
$mount()
: el 속성과 동일하게 인스턴스를 화면에 붙이는 역할, 인스턴스생성후 강제로 인스턴스를 화면에 붙일 수 있다.
라우터로 페이지를 이동할 때 최소 2개이상의 컴포넌트를 화면에 나타낼 수 있다.
네스티드 라우터와 기본 라우터 차이점
- 최상위 컴포넌트에도 <router-view>
가 있고, 최상위 컴포넌트의 하위 컴포넌트에도 <router-view>
가 하나 더 있다.
var routes = [
{
path: '/user',
component: User,
children: [
{
path: 'posts',
component: UserPost
},
path: 'profile',
component: UserProfile
},
]
}
];
특정 페이지로 이동했을 때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식
네스티드 라우터는 아래의 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만
네임드 뷰는 같은 레벨에서 여러개의 컴포넌트를 한 번에 표시
//router 영역 정의
<div id= "app">
<router-view name ="header></router-view>
<router-view></router-view> //name이 없을 경우 디폴트
<router-view name ="footer"></router-view>
</div>
//router 정의
var router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Body,
header: Header,
footer: Footer
}
}
]
});
웹 앱 HTTP 통신 라이브러리
서베에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분 만 변경할 수 있게 하는 자바스크립트 기법
Promise 기반의 API 형식이 다양하게 제공된다.
Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체,
자바 스크립트는 단일 스레드로 특정로직의 처리가 끝날때 까지 기다려주지 않는다.
따라서 데이터를 요청하고 받아올때 까지 기다렸다가 화면에 나타내는 로직을 실행해야할때 Promise를 사용
//HTTP GET 요청
axios.get('URL 주소').then().catch();
//HTTP 요청에 대한 옵션 속성 정의
axios({
method: 'get',
url: 'URL 주소',
..
});
HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수 있는 형태의 HTML로 변환해 주는 속성
template 속성에서 정의한 마크업 + 뷰 데이터를 가상돔 기반의 render() 함수로 변환하고
변환된 render() 함수는 사용자가 볼수 있게 화면을 그리는 역할을 한다.
HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미
<div>
<p v-bind:id="idA"> 아디이 바인딩 </p>
<p v-bind:class="classA">클래스 바인딩</p>
</div>
<script>
new Vue({
el: '#app',
data: {
idA: 10,
classA: 'container'
}
});
</scirpt>
v-bind:
→ :
로 간소화 가능뷰 템플릿에 자바 스크립트 표현식을 사용 할 수 있다.
<input>,<select>,<textarea>
에서만 사용가능<button v-on:click="clickBtn">클릭</button>
...
<script>
methods: {
clickBtn: function(){
alert('clicked');
}
}
</script>
<div>
<input v-model="message">
</div>
<script>
watch:{
message: function(data) {
console.log("messasge의 값이 바뀝니다 : ", data);
}
}
});
</script>a
.vue
파일 프로젝트 구조를 구성하는 방식.vue
파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일<template>
// 화면에 표시할 요소들을 정의하는영역
// HTML + 뷰 데이터 바인딩
</template>
<script>
export default {
// 뷰 컴포넌트의 내용을 정의하는영역
// template, data, methods
}
</script>
<style>
//CSS 스타일 정의하는 영역
</style>
npm install vue-cli -global
vue init webpack-simple
npm install
npm run dev