Vue2 기초 익히기(3) - Vue CLI, Vue Router, SFC, Props, Emit

Vue CLI로 뷰 설치하기

Vue CLI : Vue Command Line Interface.
Terminal에서 Vue 설치, 실행을 할 수 있게 하는 툴.

터미널에서 사용하는 뷰 설치 커맨드.

npm install -g @vue/cli

'-g'를 통해 설치해야 전역으로 설치된다. 어느 폴더에서 실행하더라도 vue가 작동되게 하려면 전역 설치 필요.

설치 후, vue 프로젝트 생성 커맨드.

vue create '프로젝트명'

vue create 이후 프로젝트 폴더에 들어가면 다음의 폴더, 파일들이 생성된 것 확인가능.

프로젝트 내 생성된 폴더

test1 (프로젝트) 폴더 내 생성된 파일들.

프로젝트 내 자동 생성된 폴더, 파일 설명.
- node_modules : vue.js가 사용하는 npm 패키지들.
- configuration files.

- package.json : devDependencies(개발할 때만 필요한 dependency)
- src : 소스코드. assets, components위치.
- public : index.html 파일이 있는 곳.

서버 실행 커맨드

npm run serve

웹 브라우저에서 'localhost:8080'주소로 접근 가능.

---

Vue Router

SPA : Single Page Application.

웹 프로젝트의 'public / index.html' 페이지가 로딩 된 후, 그 이후의 모든 페이지는 이 페이지를 통해 보여진다.
index.html에 렌더링 된 vue 인스턴스가 무엇이냐에 따라 다른 페이지가 로딩되는 것처럼 보인다.

만들어진 뷰 프로젝트에 router추가하려면 프로젝트이름 폴더 안(package.json이 있는 폴더)에서 다음의 커맨드사용.

vue add router

router폴더가 생성되고, index.js파일이 생성됨.

index.js 초기 생성 시 모습.

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

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')
  }
]

const router = new VueRouter({
  routes
})

export default router

path : url에 사용할 주소
name :
home : 연결할 Vue 파일.

App.vue 파일 : vue 파일 중 최상단 파일.

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

*** router-link : html의 a태그 역할. vue router를 사용할 때는 router-link를 사용. 브라우저에서는 자동으로 a태그로 변환됨.
링크 클릭 시 -> views폴더에 있는 vue 페이지를 보여준다.

틀은 그대로인 상태로, 안의 component만 바꿔치기해, 새로운 페이지를 보여주는 것 같은 효과를 보인다.

---

Single File Component 싱글 파일 컴포넌트

Single-File Components(SFC) : Vue 컴포넌트의 template, logic, style을 한 파일 안에 담는 것.

기본 형태.

<template>
  <!--html tag-->
</template>
<script>
//script: data, method, computed, etc.
export default {
}
</script>
<style scoped>
/*html style.
 scoped인 경우 이 파일내에만 적용,
 scoped 빼고 작성시 다른 뷰 파일에도 적용됨.*/
</style>

사용 예) 컴포넌트 파일.

<template>
  <!--html tag-->
  <div>
    <h1>This is Home page</h1>
    <p>{{ name }}</p>
  </div>
</template>
<script>
//script: data, method, computed, etc.
export default {
  data(){
    return{
      name:'Dalpang'
    }
  }
}
</script>
<style scoped>
/*html style.
 scoped인 경우 이 파일내에만 적용,
 scoped 빼고 작성시 다른 뷰 파일에도 적용됨.*/
h1 {
  color:skyblue;
}
</style>

컴포넌트 파일을 Import 해서 사용하는 View파일

<template>
  <!--html tag-->
  <div>
    <h1>This is Home page</h1>
    <dal-pang/>
  </div>
</template>

<script>
//script: data, method, computed, etc.

import DalPang from '@/components/DalPang.vue';

export default {
  components:{
    DalPang
  },

  data(){
    return{
      name:'Dalpang Home'
    }
  }

}
</script>
<style scoped>

</style>

views, components 폴더.
: 재사용할 컴포넌트들은 components폴더에, 페이지 단위의 컴포넌트는 view에 저장한다.

components 파일 작성해 사용하기.

• components/"컴포넌트명.vue"
• views/"페이지명.vue"

---

Props : 자식 컴포넌트에 데이터 보내기

재사용할 컴포넌트를 담고 있는 뷰 파일에서 props를 통해 매개변수를 받을 수 있게 지정해 주면,
이 컴포넌트를 가져와서 사용하는 뷰 파일에서 해당 props에 대입되는 변숫값을 넘겨줄 수 있다.
이를 통해 컴포넌트를 import 해서 사용하는 페이지들이, 각기 다른 값을 화면에 출력하게 설정 가능.

- 컴포넌트 뷰파일

<template>
  <div>
    <p>{{ title }}</p> <!--props 값을 가져와서 보여줄 태그 지정.-->
    <button @click="updateName">Change Name</button>
  </div>
</template>
<script>
export default{
  props:{ //title 값을 props로 받기로 지정.
    title:{
      type:String,
      required:true
    }
  },
  ...

- 위 컴포넌트를 임포트해 사용하는 뷰파일

<template>
  <!--html tag-->
  <div>
    <h1>This is Home page</h1>
    <dal-pang title="3"/> <!-- props argument -->
  </div> 
</template>

<script>
//컴포넌트를 import 해줌
import DalPang from '@/components/DalPang.vue';

export default {
  components:{
    DalPang //components를 이 파일에서 사용할 수 있게 등록.
  },
  ...

*** props로 받은 값 부모(뷰페이지) -> 자식(컴포넌트)으로 값 보내기.

Props 에서 받은 값은, 다른 곳에서 사용 하면 안됨!
(data, methods 등에서 사용 하지 말것)

부모로 부터 전달 받은 props 값을 자식 컴포넌트에서 수정 하려고 하면 오류가 남. 부모, 자식 컴포넌트의 값이 모두 변경되면서 오류가 나서 꼭 부모의 값을 바꿔 줘야 한다. 이를 위해 Emit을 사용함.

---

EMIT

자식 컴포넌트에서 부모 컴포넌트로 데이터 보내기.
form태그를 통해 값을 넘기는 경우 다음과 같이 양방향 데이터 송수신이 가능한 v-model 사용.

이 form 태그 부분을 컴포넌트화 시키는 경우.
name 데이터를 props를 사용해 넘겨줘야 함.
또한, 'v-model'이 아닌 ':value'값으로 넣어줘야 함.
v-model = v-bind + v-on.

v-bind + v-on

<input
  :value="text"
  @input="event => text = event.target.value">

v-model

<input v-model="text">

방법 1)

방법 2)
InputField.vue파일(자식 컴포넌트)에서 메소드를 통해 input을 보내주지 않고, 직접 input태그 내에서 처리도 가능.
- InputField.vue

        @input="$emit('update-name', $event)"

-Home.vue

<InputField :name="name" @update-name="name=$event.target.value"/>

방법 3) component에서 v-model사용

v-model을 사용해 코드 길이가 줄어듦.