Published on

Vue

Authors
  • avatar
    Name
    Inhwan Cho
    Twitter

Vue 설치

# vue cli설치 / 프로젝트 생성
npm install -g @vue/cli
vue create project-name1212

# 프로젝트 폴더로 이동 / 로컬에서 실행
cd project-name1212
npm run serve

Vue의 구조

VS code에서 Vue Language Features (Volar)와 Vue 3 Snippets를 설치.

xxx.vue 파일을 생성 한 후, vueInit을 치면 아래와 같은 구조가 생성됩니다.

xxx.vue
<template lang="">
  <div>div태그!</div>
</template>

<script>
export default {}
</script>

<style lang="">
</style>

template, script, style 이렇게 3개가 vue 파일의 기본 구조이며

template

html을 작성하는 칸입니다.

script

javascript를 작성하는 칸입니다.

style

css를 작성하는 칸입니다.

react와 유사하게 vue create를 하게되면 App.vue 파일을 html 파일로 변환시키는 구조입니다.

Vue 문법

Vue는 React와 유사하지만 다릅니다.

데이터 바인딩에 대괄호 하나만을 이용하는 react와 달리 대괄호를 두 개를 사용합니다. 또한, js에서 자주 사용되는 문법을 사용 할때 html 태그에서 사용이 가능합니다.

<template>
  <div v-for="(aaa, index) in 3" v-bind:key="index">
    {{ aaa }}
  </div>
</template>

위 처럼 사용 가능한데 이러면 출력이 (1,0), (2,1), (3,2)가 됩니다.

v-bind의 문법의 경우 v-bind를 생략하고 :xxx만 입력해도 됩니다.

template 및 v-for

template은 html을 작성하는 칸이며 아래와 같이 입력하면 됩니다.

for 문법과 거의 동일하며, 시스템상 분류를 위해 v-bind:key 값도 같이 입력해줘야 합니다.

in 뒤의 값은 Array 혹은 number가 올 수 있으며, Array 타입인 경우 forEach 문법처럼 작용됩니다.

// 예를들어 script에 arrayA라는 데이터가 있고,
// v-for문법을 통해 풀어본다면,
// 4, 5, 6이 생성됩니다.
<template>
  <div v-for='(anything) in arrayA' v-bind:key='anything'>
    {{ anything }}
  </div>
</template>

<script>
export default {
  return {
    name: '아무거나',
    data(){
      return {
        arrayA : [4,5,6]
      }
    }
  }
}
</script>

// 또한, 아래와 같이 Components에도 문법을 사용 가능합니다.
<Compo :data='data[i]' v-for='(datum, i) in data' :key='i' />

script

script는 javascript를 작성하는 칸이며,

import와 export가 가능합니다.

데이터는 Object type으로 입력하며, 아래와 같이 입력합니다.

<script>
import { data1 } from './assets/data.js'
export default {
  name: "App",
  props: { data : Number }
  data() {
    return {
      data1: data1,
      data2: [0,0,0],
    },},
  methods: {
    incerease(index){
      this.data2[index] += 1
    }
  }
}
</script>

style

스타일 태그의 예시는 css입력를 하는것처럼 입력하면 됩니다..

<style>
.menu {
  background: red;
  padding: 20px;
  border-radius: 10px;
}
</style>

props

기본적으로 컴포넌트에서 이동된 props는 read-only 입니다. 즉, 수정이 불가능합니다.

부모의 data를 수정하려면 아래와 같이 custom event를 사용해야 합니다.

Compo.vue
// 메시지만 보냄
<div>
  <p @click='$emit('showModal', 전송할_데이터)'>클릭 시 이벤트 발송</p>
</div>
App.vue
<Compo @showModal='show = true; aa = $event' />
// 참고로 Component에서 보낸 데이터는 $event에 담겨있습니다.

input

input의 데이터를 저장하는 방법

<input @input='aa = $event.target.value'/>
  <p>{{aa}}</p> 
<button>button</button>

// 위와 동일함(축약형)
<input v-model='aa' />
  <p>{{aa}}</p>
<button>button</button>

input의 데이터 제약하는 방법

watch를 사용 - useEffect와 유사.

<input v-model='date' />
  <p>{{date}}</p>
<button>button</button>

<script>
{ 
  name: 'name',
  data(){
    return {
      date : 1234,
    }
  }
  watch : {
    date(afterData, prevData){
      {/* date가 바뀔때마다 실행됨 */}
      if (afterData == 2){
        console.log(afterData)
      }
      if (afterData === String){
        console.log(afterData)
      }

    }
  }
}

만약, array 자료를 복사 또는 값이 공유가 일어나지 않게 복사하고 싶으면 [...arrayA] 이렇게 deep copy를 해서 사용해야함. 단, 공유가 일어나지 않게 1개만 copy하면 안되고 2개 이상 deep copy를 해야합니다.

Discuss on Twitter • View on GitHub