1. 뷰 라우터#

라우팅이란 웹 페이지간의 이동 방법 라우팅은 현재 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션에서 주로 사용

뷰 라우터#

태그 설명
<router-link to="URL값"> 페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동
<router-view> 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router Sample</title>
  </head>
  <body>
    <div id="app">
      <h1>뷰 라우터 예제</h1>
      <p>
        <router-link to="/main">Main 컴포넌트로 이동</router-link>
        <router-link to="/login">Login 컴포넌트로 이동</router-link>
      </p>
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      // 3. Main. Login 컴포넌트 내용 정의
      var Main = { template: '<div>main</div>' };
      var Login = { template: '<div>login</div>' };
      // 4. 각 url에 해당하는 컴포넌트 등록
      var routes = [
        { path: '/main', component: Main },
        { path: '/login', component: Login }
      ];
      // 5. 뷰 라우터 정의
      var router = new VueRouter({
        routes
      });
      // 6. 뷰 라우터를 인스턴스에 등록
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>
라우터 URL의 해시값(#)을 없애기 위해서는 다음처럼 히스토리 모드를 사용
var router = new VueRouter({
    mode: 'history",
    routes
});

네스티드 라우터#

네스티드 라우터를 이용해서 URL에 따라 컴포넌트의 하위 컴포넌트를 다르게 표시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Nested Router</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/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>

네임드 뷰#

네임드 뷰는 특정 페이지로 이동했을/때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식 같은 레벨에서 여러개의 컴포넌트를 한번에 표시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Named View Sample</title>
  </head>
  <body>
    <div id="app">
      <router-view name="header"></router-view>
      <router-view></router-view>
      <router-view name="footer"></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/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,
              footer: Footer
            }
          }
        ]
      })
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

2. 뷰 HTTP 통신#

웹 앱의 HTTP 통신방법#

뷰에서 Ajax를 지원하기 위한 라이브러리

  • 뷰 리소스
  • 액시오스(axios)

뷰 리소스#

초기 코어팀에서 공식적으로 권하는 라이브러리였음 2016년말 공식지원 중단

<html>
  <head>
    <title>Vue Resource Sample</title>
  </head>
  <body>
    <div id="app">
      <button v-on:click="getData">프레임워크 목록 가져오기</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></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));
                });
          }
        }
      });
    </script>
  </body>
</html>

액시오스#

https://github.com/axios/axios Promise기반의 API 형식을 다양하게 제공

액시오스 사용하기#

// HTTP GET 요청
axios.get('URL주소').then().catch();

// HTTP POST 요청
axios.post('URL주소').then().catch();

// HTTP 요청에 대한 옵션 속성 정의
axios({
    method: 'get',
    url: 'URL주소',
    ...
});

API 유형 처리 결과
axios.get('URL주소').then().catch() 해당 URL주소에 대해 HTTP GET요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then()안의 로직이 실행되고 오류가 발생하면 catch()에 정의한 로직이 실행
axios.post('URL주소').then().catch() 해당 URL주소에 대해 HTTP POST요청을 보냄. then()과 catch()는 상동
axios({옵션속성}) HTTP요청에 대한 자세한 속성들을 직접 정의해서 보낼수 있음
<html>
	<head>
		<title>Vue with Axios Sample</title>
	</head>
	<body>
		<div id="app">
			<button v-on:click="getData">프레임워크 목록 가져오기</button>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/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>

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-2) was last changed on 13-Aug-2018 10:01 by DongGukLee