흔히 html 스타일을 꾸미는데 사용하는 class 와 style 속성을 바인딩 할 수 있다.

 :class 

1. 객체 구문

<div class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
></div>
<!-- isActive 와 text-danger 값이 true 일 때 -->
<div class="static active text-danger"></div>

위와 같이 객체 형식으로 여러 class 바인딩 설정이 가능하며, 일반 class 와도 함께 사용하는 것이 가능하다.

2. 배열 구문

<script>
data() {
    return {
        activeClass: 'active',
        errorClass: 'text-danger'
    }
}
</script>

<div :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :class="[{ active: isActive }, errorClass]"></div>

위와 같이 배열 형식은 삼항표현식도 가능하고, 객체 구문을 포함할 수도 있다.

3. 컴포넌트 사용

<div id="app">
    <my-component class="baz1"></my-component>
    <my-component class="baz2"></my-component>
</div>

<script>
const app = Vue.createApp({})

app.component('my-component', {
    template: `
        <p :class="$attrs.class">Hi!</p>
        <span>This is a child component</span>
    `
})
</script>

컴포넌트에서 여러 루트 엘리먼트(위에서는 p 와 span 태그)를 정의한 경우 $attrs 속성을 사용하여 클래스를 각각 전달 받을 수도 있다.

 :style 

:style 구문의 사용법은 class 와 매우 비슷하게 객체/배열 구문을 사용할 수 있다. JavaScript 객체인 것을 제외하고는 css 와 흡사하다.

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

컴포넌트 옵션의 속성인 data, methods 이외에, computed, watch 도 자주 사용한다. computed 와 watch 는 A 데이터를 기반으로 B 데이터를 변경 할 수 있다는 공통점이 있지만 다른 차이점을 구분해서 사용해야 한다.

computed

• 익명함수에는 반드시 값을 리턴
• A 데이터에 기반하여 자동으로 B 데이터를 처리/캐싱할 때.(getter/setter)
• 많은 경우 watch 보다는 computed 를 사용

watch

• 대상의 값이 변경될 때마다 변경 이전값과 이후값을 인자로 받아 콜백함수 실행
• A 데이터에 기반하여 특정 액션을 실행하고자 할 때 사용, 특히 route 활용
• computed 로 불가능하다면...

<div id="demo">{{ count }}</div>

<script>
...
    data() {
        return {
            count: 3
        }
    },
    computed: {
        count() {
            return count++;
        }
    },
    watch: {
        count(newVal, oldVal) {
            console.log(newVal, oldVal);
        }
    }
...
</script>

위 예제에 컴포넌트 인스턴스가 생성될 때 count 의 초기값 3 은 computed 에 의해 4가 되고 watch 는 4 와 3 을 인자로 보여준다. computed 는 지정한 데이터(count) 로부터 즉시 자동계산을 하였고, 그로 인해 count 가 변경되자 count 를 주시하던 watch 는 log 를 출력했다. 위 코드에서 computed 를 삭제하면 log 는 출력되지 않는다. count 값이 변경되지 않았기 때문에... 쉽게 확인할 수 있는 computed 와 watch 의 차이!

vue 공식 문서에는 선언형 프로그래밍인 computed 와 명령형 프로그래밍인 watch 중 어느 것을 사용해도 상관없다면, computed 를 사용하라고 권장하고 있다.

Vue.js 에서 각 컴포넌트가 생성될 때 일련의 초기화 단계를 거치는데 그 단계마다 특정 코드를 실행할 수 있는 라이프사이클 훅이 있다. 그냥 한번 렌더링되는 과정인데 저렇게 단계가 많다. ㅜ 이들은 컴포넌트 인스턴스 속성들처럼 정의한다.

Vue.createApp({
    data() {
        return { count: 1 }
    },
    beforeCreate() { ... },
    created() {
        console.log('count is: ' + this.count) // => "count is: 1"
    },
    beforeMount() { ... },
    mounted() { ... },
    beforeUpdate() { ... },
    updated() { ... },
    unmounted() { ... }
})

1. beforeCreate : 인스턴스가 초기화되고 호출됨
2. created : 인스턴스가 생성된 후 호출됨 (data, computed, methods, watch, event callback 사용가능
3. beforeMount : 마운트가 시작되기 직전에 호출됨 (render 함수가 처음으로 호출됨)
4. mounted : 인스턴스가 마운트된 후 호출됨
5. beforeUpdate : 데이터가 변경되고 DOM 에 적용되기 전에 호출됨
6. updated : 데이터 변경 후 DOM 이 다시 렌더링되고 패치된 후에 호출됨
7. unmounted : 컴포넌트 인스턴스가 마운트 해제된 후 호출됨

mounted / updated 훅은 모든 자식 컴포넌트까지 마운트 되었음을 보장하지 않으며, 전체 화면이 렌더링된 후의 작업은 vm.$nextTick 을 사용한다. 특정 외부 라이브러리들을 사용할 때 뒤늦게 렌더링되서 컨트롤되지 않을 때 사용하면 유용하다.

mounted() {
    this.$nextTick(function () {
        // 전체 화면내용이 렌더링된 후에 아래의 코드가 실행됩니다.
    })
}

Vue 에서도 동적 데이터 바인딩을 아주 쉽게 해결할 수 있다. Vue 에서는 컴포넌트의 인스턴스의 데이터를 화면에 보이게 하고, 데이터가 변경되면 화면도 즉각 업데이트 할 수 있다.

1. data / methods

모두 Vue 컴포넌트 인스턴스에 정의하는 옵션이다. data 옵션에 변수를 정의하고, methods 옵션에 함수를 정의하여 변수를 연산시키는(?) 방식이다.

const app = Vue.createApp({
    data() {
        return {
	    count: 4,
	    msg: 'hello',
	    ...
        }
    },
    methods: {
        increment() {
            this.count++
        },
        decrement() {
            this.count--
        }
    }
})

위와 같이 data 함수에서 반환된 객체의 속성들(count, msg, ...)은 HTML 로 바인딩이 가능하다. 또한 event 로부터 호출된 methods 옵션의 함수들은 data 속성들을 업데이트 할 수 있다. this 는 인스턴스 자신, 컴포넌트의 인스턴스를 참조한다. 매우 자주 사용하게 될 것이다. methods 를 정의할 때 화살표 함수(=>)를 사용하면 this 값을 바인딩하지 못하므로 참고한다.

2. data binding

data 에 정의된 속성들은 다음과 같이 HTML 에서 바인딩 할 수 있다.

<span>메시지: {{ msg }}</span>
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

이중 중괄호 구문 {{ Mustache }} 을 사용한 문자열 보간법(text interpolation) 이다. 위 예제에서는 컴포넌트 인스턴스의 msg 속성을 바인딩하였으며, 컴포넌트 인스턴스의 msg 속성이 변경될 때마다 템플릿 구문의 msg 속성 역시 즉각 갱신된다. 또한 자바스크립트 표현식도 가능하다. 문자열 보간법은 html 태그 속성에는 사용할 수 없으며, 이 때는 v-bind 디렉티브로 대체할 수 있다.

<div v-bind:id="dynamicId"></div>
<div v-bind:id="'list-' + id"></div>

Vue.js 에서는 태그 속성으로  v-  로 시작하는 디렉티브(directive) 를 사용할 수 있으며, 마찬가지로 반응형으로 컴포넌트 인스턴스의 데이터를 바인딩하여 갱신하는데 유용하다.

<a v-bind:href="url"> ... </a>
<a :href="url"> ... </a>
<a :[key]="url"> ... </a>

<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
<a @[event]="doSomething"> ... </a>

<form v-on:submit.prevent="onSubmit">...</form>

• v-bind : 기존 태그의 속성에 데이터 바인딩 가능. (약어로 v-bind 생략가능)
• v-on : 기존 이벤트를 수신하여 메소드 호출. (약어로 @ 를 사용하여 v-on: 생략가능)
• v-on:submit.prevent 는 form 태그에 거의 고정적으로 사용되며, event.preventDefault()를 호출하도록 지시한다.
• [] : 대괄호를 사용하여 태그 속성이나 이벤트를 지정하는 것도 가능하다.

단일 페이지 어플리케이션(SPA) 인 vue 프로젝트에서의 링크 및 라우팅은 Vue.js 의 공식 라우터인 Vue Router 를 사용할 수 있다. (써드파티 라우터도 상관없음. Page.js, Director, ...) 이 때 라우터는 화면 전환에 필요한 기능들을 제공한다. 경로 매핑, 전환 효과... 우리는 단지 컴포넌트(.vue) 를 열심히 만들어 경로에 매핑하면 된다. 만약 단순한 라우팅만 필요하다면 별도의 라이브러리 없이 페이지 수준의 컴포넌트를 렌더링 하면 된다.

설치

> npm install vue-router
# or
> npm install vue-router@4

1. src/router.js

이 파일에 라우팅 경로와 매핑될 컴포넌트 정보들을 작성한다.

import Vue from 'vue'
import VueRouter from 'vue-router'

import App from './App'
import Component1 from "@/components/Component1";
import Component2 from "@/components/Component2";

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: App
        },
        {
            path: '/menu1',
            component: Component1
        },
        {
            path: '/menu2',
            component: Component2,
	    children: [
	       ...
	    }
        }
    ],
    mode: 'history'
})

export default router

가장 쉬운 방법으로 path 에 매칭되는 컴포넌트를 정의하였으며, children 안에는 동일하게 서브 path 와 컴포넌트들을 정의할 수 있다. vue-router 의 기본 mode 는 hash 이며 url 에 해시(#)가 추가되는데, 해시를 제거하려면 history 모드를 사용해야 한다.

2. src/main.js

Vue 인스턴스에 라우터 추가

import router from './router'

new Vue({
  render: h => h(App),
  router  // routes: routes 의 줄임
}).$mount('#app')

3. component.vue

<template> 안에서는 선언적 방식의 router 관련 태그로 <router-link> 와 <router-view> 가 주로 사용된다. <router-link> 는 <a> 태그로 렌더링되며, <router-view> 자리에는 지정된 컴포넌트가 렌더링된다.

<router-link to="/menu1">/menu1</router-link>
<router-link to="/menu2">/menu2</router-link>

<router-view name="navigation"></router-view>
<router-view name="contents"></router-view>

<router-link> 를 사용하면, url 에 매칭되었을 때 해당 태그에 'router-link-active' 클래스가 생성되므로 원한다면 스타일도 쉽게 적용 가능하다.

라우터 파라미터

routes: [
    { path: '/user/:id', component: User },
    { path: '/user/:id', component: User, props: true },
    { path: '/user', component: User, props: (route) => ({ query: route.query.q }) },
]

• 첫번째 예는 컴포넌트에서 $route.params.id 로 속성을 받을 수 있다.
• 두번째 예는 컴포넌트 옵션에서 props: ['id'] 로 선언 후 id 로 속성을 받을 수 있다.
• 세번째 예는 /user?q=abc 에 대해 props: ['query'] 로 선언 후 속성을 받을 수 있다.

프로그래밍 방식의 router 사용

주로 Vue 인스턴스 내부에서 프로그래밍 방식(this.$router)으로 사용하여 라우터 인스턴스 메소드를 사용할 수 있다.

this.$router.push(path)  // window.history.pushState
this.$router.replace(path)  // window.history.replaceState
this.$router.go(-1)  // window.history.go(-1)