vue.js - 라우터, http, 템플릿, CLI

뷰 라우터

뷰에서 라우팅 기능을 구현 할 수 있도록 지원하는 공식 라이브러리

<router-link to="URL 값"> : 페이지 이동 태그, 화면에서는 <a>로 표시됨

<router-view> : 페이지 표시 태그. 변경되는 url에 따라 해당 컴포넌트를 출력해주는 영역

​

$mount() API

-el속성과 동일하게 인스턴스를 화면에 붙이는 역할

​

<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({ el: '#app', router: router }); </script>

​

네스티드 라우터 (Nested Router)

-라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있음

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

-한번에 더 많은 컴포넌트를 표시하는 데는 한계가 있음

// 네스티드 라우터 정의 var routes = [ { path: '/user', component: User, children: [ { path: '', component: UserInfo }, { path: 'post', component: UserPost }, ] } ];

네임드 뷰(Named View)

- 특정 페이지로 이동했을 때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식

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

---

뷰 HTTP 통신

http: 브라우저와 서버 간에 데이터를 주고 받는 통신 프로토콜

ajax 지원을 위한 라이브러리 제공 - 뷰 리소스, 액시오스(axios)

​

액시오스 설치 및 사용

CDN : <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

-해당 url 주소에 대해 http 요청을 보내서 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고,

데이터를 받아올 때 오류 발생시 catch()에 정의한 로직이 수행됨

-http요청에 대한 자세한 속성을 직접 정의하여 보낼 수 있음 (url, http요청방식, 보내는데이터 유형, 기타 등)

-> data속성이 일반 문자열 형식이 아닌 객체 형태이므로 별도로 JSON.parse() 사용하여 객체로 변환할 필요가 없음

​

---

뷰 템플릿(Template)

HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여

사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성

​

1. 데이터 바인딩(Data Binding)

html 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미

​

1) {{}} 콧수염 괄호

뷰 인스턴스의 데이터를 html 태그에 연결하는 가장 기본적인 텍스트 삽입 방식

2) v-bind

아이디, 클래스, 스타일 등의 html 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결방식

v-bind 속성으로 지정할 html 속성이나 props 속성 앞에 접두사로 붙여준다

<div id="app"> <p v-bind:id="idA">아이디 바인딩</p> <p v-bind:class="classA">클래스 바인딩</p> <p v-bind:style="styleA">스타일 바인딩</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { idA: 10, classA: 'container', styleA: 'color: blue' } }); </script>

2. 자바스크립트 표현식

{{ }} 안에 자바스크립트 표현식 사용가능

- But, 자바스크립트 선언문과 분기구분 사용 불가 / 복잡한 연산은 인스턴스 안에서 처리

​

3. 디렉티브

html 태그 안에 v- 접두사를 가지는 모든 속성들을 의미

<a v-if="flag">Vue.js</a>

v-if : 지정한 뷰 데이터값의 참, 거짓여부에 따라 해당 html태그를 화면에 표시하거나 표시안함

v-for: 지정한 뷰 데이터 개수만큼 해당 html 반복 출력

v-show: v-if와 유사하나, v-show 는 css효과만 display:none;으로 주어 실제태그는 남아있고 화면으로 표시는 안함

v-bind : 데이터 연결

v-on : 화면요소의 이벤트를 감지하여 처리할 때 사용

v-model : 폼(form)에서 주로 사용되는 속성, 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화

​

4. 이벤트 처리

<div id="app"> <button v-on:click="clickBtn(10)">클릭</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', methods: { clickBtn: function(num) { alert('clicked ' + num + ' times'); } } }); </script>

5. 고급 템플릿 기법

1)computed 속성과 methods 속성 차이점 (능동 vs 수동)

-methods 속성은 호출할 때만 해당 로직 수행

-computed 속성은 대상 데이터 값이 변경되면 자동적으로 수행됨

​

2)watch 속성

-데이터 변화를 감지하여 자동으로 특정로직 수행

-computed 속성과 유사하나 computed 속성은 내장 api를 활용한 간단한 연산정도로 적합,

watch 속성은 데이터 호출과 괕이 상대적으로 시간이 더 많이 소모되는 비동기 처리에 적합

<div id="app"> <input v-model="message"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, watch: { message: function(data) { console.log("message의 값이 바뀝니다 : ", data); } } }); </script>

뷰 CLI

- 싱글 파일 컴포넌트 체계 사용을 위해 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 도구 필요

(웹팩, 브라우저리파이의 기능)

- 뷰CLI에서 초기프로젝트 쉽게 구성하기 위한 명령어를 사용

- 명령프롬프트창에서 npm install vue-cli-global 입력 하여 설치가능

​

뷰 CLI 명령어

vue init webpack 고급 웹팩 기능활용한 프로젝트 구성방식. 테스트, 문법검사 지원

vue init webpack-simple 웹팩 최소기능 활용한 프로젝트 구성방식. 빠른 화면 프로토파이핑용

​

뷰 CLI로 프로젝트 생성

-> 프로젝트 생성폴더로 이동후 vue init webpack-simple 입력 (프로젝트 생성)

-> 질문에 대해 답한 후

-> npm install (라이브러리 설치)

-> npm run dev 실행 (프로젝트 구동)

cmd 에는 아래와 같은 내용이 표시됨

Project is running at http://localhost:8080/ webpack output is served from /dist/ 404s will fallback to /index.html

뷰 로더(Vue Loader)

웹팩에서 지원하는 라이브러리로, 싱글파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 브라우저에서 실행가능한 웹페이지 형태로 변환해줌

예를들어 app.vue 파일에서

<template>,<script>,<style>의 내용이 각각 html, 자바스크립트, css코드로 인식될 수 있도록

뷰 로더가 변환작업을 수행 한 것.

​

* Do it! vue.js 입문 (장기효저) 책을 보고 요약한 내용입니다.