Vue.js study 04.
04 상용 웹을 개발하기 위한 필수 기술들 - 라우터& HTTP통신
04-1 뷰 라우터
✔라우팅이란?
웹 페이지 간의 이동 방법을 말한다. 싱글 페이지 애플리케이션에서 주로 사용하고 있다.
✔싱글 페이지 어플리케이션이란?
페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션이다.
✔뷰 라우터: 뷰에서 라우팅 기술을 구현 할 수 있도록 지원하는 공식 라이브러리 이다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>뷰 라우터 예제</h1>
<p>
<router-link to="/main">Main component</router-link> <!-- 1.url 값을 변경하는 태그-->
<router-link to="/login">Login component</router-link>
</p>
<router-view></router-view><!-- 2.url 값에 따라 갱신되는 화면영역 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
var Main = { template: '<div>main</div>' };// 3. 컴포넌트 정의
var Login = { template: '<div>login</div>' };
var routes = [
{ path: '/main', component: Main },// 4. 각url에맞춰 컴포넌트 지정
{ path: '/login', component: Login }
];
var router = new VueRouter({//5. 뷰라우터정의
// mode:'history', 주소에 해시값을없애고싶을떄
routes
});
var app = new Vue({ //6. 뷰객체에 라우터추가
router
}).$mount("#app"); // el 속성과같다
</script>
</body>
</html>✔ 네스티드 라우터: 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
var User = {
template: '<div>User component<router-view></router-view></div>'
}
var UserProfile = { template: '<p>User Profile Component</p>' }
var UserPost = { template: '<p>User Post Component</p>' }
var routes = [
{
path: '/user',
component: User,
children: [{
path: 'posts',
component: UserPost
},{
path:'profile',
component:UserProfile
}
]
}
]
var router = new VueRouter({
routes
});
var app = new Vue({
router
}).$mount("#app");
</script>
</body>
</html>✔네임드 뷰: 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view> <!-- name이없는경우 defalut-->
<router-view name="footer"></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
var Body = { template: '<div> This is Body</div>' };
var Header = { template: '<div>This is Header</div>' };
var Footer = { template: '<div>This is Footer</div>' };
var router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Body,
header: Header, //router-view 의 name속성과 컴포넌트를 연결.
footer: Footer
}
}
]
});
var app = new Vue({ router }).$mount("#app");
</script>
</body>
</html>04-2 뷰 HTTP 통신
✔뷰 리소스 (잘 안쓰는 추세이지만 사용은 한다.)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="getData">프레임 워크 목록 가져오기 </button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
new Vue({
el: '#app',
methods: {
getData: function () {
this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json').then(function (response) {
console.log(response);
console.log(JSON.parse(response.data));
//// 응답 데이터의 body 값이문자열이기 때문에 JSON.parse() 이용하여 자바스크립트 객체로보기쉽게변환하였다
})
}
},
})
</script>
</body>
</html>✔엑시오스(promise 기반의 api형식이 다양하게 제공되어 별도의 로직을 구현 할 필요 없다.)
👍promise 기반의 api란: 서버에 데이터를 요청하면 받아오는 것과 같은 일을 하는 비동기 로직 처리에 유용한 자바 스크립트 객체이다. js는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려 주지 않는다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="getData">Get Data!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
getData: function () {
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json').then(function (response) {
console.log(response);
})
}
},
})
</script>
</body>
</html>Author And Source
이 문제에 관하여(Vue.js study 04.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chaean_7714/Vue.js-study-04저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
