vue.js 입문

npm run serve

vue 코드는 main.js를 통해 동적으로 생성되어 실제로 브라우저에 띄워지는 index.html에서는 vue 코드를 확인할 수 없다. 

 

--main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

 

index.html의 id가 'app'인 태그에 App(./App.vue)를 mount를 시킨다.

 

--App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<nav> : navigation menu

<router-link to="/"> 는 <a href="/"> 로 렌더링 된다.

<router-view/> : routing mapping에 따라 동적으로 view component로 교체될 부분

 

--/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

 

routing 정보 (path - vue)

.vue는 결국 .js 로 컴파일 된다.

서버를 구동하면 app.js와 chunk-vendors.js는 항상 로딩된다.

글로벌로 import한 HomeView 모듈은 app.js 에 들어가고 운영 중 필요한 외부 모듈은 모두 chunk-vendors.js 에 들어간다.

webpackChunkName: 해당 컴포넌트가 변환될 js 파일의 이름 (AboutView.vue -> about.js)

• ChunkName이 같은 컴포넌트는 같은 파일로 컴파일된다.
• app.js와 달리 실제로 사용자가 /about 경로에 접근했을 때 동적으로 import 한다. (지연 로딩)
• webpackPrefetch:true로 두면 사용자가 해당 라우터에 접근하는 순간 미리 서버로부터 받아와서 캐시에 담아둔다.
• 만약 페이지 사이즈가 매우 크거나 사용자가 접근할 확률이 높다면 webpackPrefetch:true로 설정하는 것이 좋다.

가져온 컴포넌트는 App.vue의 <router-view/>를 대체한다.

라우터 설계에서 컴포넌트를 가져오는 타이밍과 webpack 그루핑이 매우 중요하다.

 

--views/HomeView.vue

views: 뷰 템플릿. 화면 전체 (naming rule: ~View.vue)

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

@: src 디렉터리

<template>: HTML 코드

<script>: JavaScript 코드

<style scoped>: CSS 코드. assets 디렉터리의 .css 보다 해당 화면에 최적화된 스타일 적용

import한 HelloWord를 템플릿에서 tag처럼 사용하면서 msg 속성 사용

 

--components/HelloWorld.vue

components: 뷰 컴포넌트. 단위 UI+JS. views 의 컴포넌트들에 비해 재사용성이 높음

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    ...
  </div>
</template>

HomeView 에서 msg 속성으로 정의했던 값이 {{ msg }} 에 바인딩된다.

 

Data Binding

Vue는 양방향 데이터 바인딩이 가능하다.

현재 화면에서 쓰이는 데이터는 JSON 형태로 반환되야 HTML에서 사용할 수 있다.

문자열 바인딩 -> {{ key }}

 

전역 컴포넌트

Vue.component(tagName, {

    template: ``,

    data() { return {} },

    methods: {}

});

사용: <tagName></tagName>

 

*컴포넌트는 여러 인스턴스에서 사용하기 때문에 data를 함수 형태로 반환하여 사용

 

지역 컴포넌트

const component = {

 template: ``,

    data() { return {} },

    methods: {}

}

사용: Vue 인스턴스 components() 속성에 " 'tagName': component " 정의하고 vue 템플릿 안에서 <tagName></tagName>

 

뷰 인스턴스 라이프사이클

서버 요청은 보통 created()나 mounted()에서..

DOM 컨트롤은 mounted에서

라우터에 의 전환은 해당 컴포넌트를 destroy하고 새로운 컴포넌트를 불러옴