뷰라우터

라우팅이란?

• 웹페이지 간의 이동 방법

• 화면 간의 전환이 매끄러울 뿐만 아니라 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개이상의 컴포넌트를 화면에 나타낼 수 있다.

    • 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조

  • 네스티드 라우터와 기본 라우터 차이점
    - 최상위 컴포넌트에도 <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 통신

    ajax

  • 웹 앱 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 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미

  {{ }}

  • 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 텍스트삽입방식

  v-bind

  • 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: → :로 간소화 가능

뷰 템플릿에 자바 스크립트 표현식을 사용 할 수 있다.

디렉티브

• HTML 태그안에 v-접두사를 가지는 모든 속성
• 뷰의 데이터값이 변경되었을때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터값에 따라 갱신되므로 화면의 요소를 더 쉽게 조작할 수 있다.

v-if

• 지정한 뷰 데이터값의 참,거짓 여부에 따라 해당 HTML 태그를 표시하거나 표시하지 않음

v-for

• 지정한 뷰 데이ㅌ의 개수만큼 해당 HTML 태그를 반복 출력

v-show

• v-if와 유사하게 데이터의진위 여부에 따라 해당 HTML태그를 화면에 표시하거나 표시하지 않음
  • v-if는 태그를 완전히 삭제하지만 v-show는 css효과로 화면에 안보이게만한다.

v-on

• 화면요소의 이벤트를 감지하여 처리할 때 사용

v-model

• 폼에서 주로 사용하며, 폼에 입력한 값을 뷰인스턴스의 데이터와 즉시 동기화
• 화면에 입력된값을 저장하여 서버에 보내거나 watch를 통해 추가 로직 수행
• <input>,<select>,<textarea>에서만 사용가능

이벤트 처리

<button v-on:click="clickBtn">클릭</button>
...
<script>
	methods: {
		clickBtn: function(){
			alert('clicked');
		}
	}
</script>

computed 속성

• 데이터 연산들을 정의하는 영역
• data 속성값의 변화에 따라 자동으로 다시 연산하며, 캐싱하는 장점이있다.

methods 속성

• computed와 달리 호출할 때만 해당 로직이 수행된다.

watch속성

• 데이터 변화를 감지하여 자동으로 특정 로직을 수행
• 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합

<div>
	<input v-model="message">
</div>
<script>
	watch:{
		message: function(data) {
			console.log("messasge의 값이 바뀝니다 : ", data);
		}
}
});
</script>a

싱글 파일 컴포넌트 체계

• .vue 파일 프로젝트 구조를 구성하는 방식
• .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일

.vue파일 구조

<template>
		// 화면에 표시할 요소들을 정의하는영역
		// HTML + 뷰 데이터 바인딩
</template>

<script>
export default {
	// 뷰 컴포넌트의 내용을 정의하는영역
	// template, data, methods
}
</script>

<style>
	//CSS 스타일 정의하는 영역
</style>

뷰 CLI

• 뷰 CLI설치
  • npm install vue-cli -global
• 프로젝트 생성
  • vue init webpack-simple
• 관련 라이브러리 설치
  • npm install
• 프로젝트 구동
  • npm run dev

뷰 로더

• .vue 파일의 내용을 브라우저에서 실행가능한 웹페이지 형태로 변환해준다.