시작하기

vue.js는 cdn만 가지고도 프로젝트 시작 가능.
프로젝트를 관리하려면 npm으로 설치해서 사용하는 것이 용이.

cdn이나 npm으로 Vue.js를 설치하면 전역객체인 Vue를 사용할 수 있다.

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <h1> {{ message }} </h1>
</div>

Vue.createApp({
  data() {        // data: function() { }를 줄여서 사용한다.
    return {
      message: 'Hello Vue!'
    }
  }
}).mount('#app')

Vue CLI, Vetur

터미널을 통해 vue.js 프로젝트를 만들 수 있다.
그러기 위해선 vue CLI 기능을 설치해야 한다.

npm install -g @vue/cli

참조) Vue CLI

다음의 명령어들을 입력하면 vs code로 프로젝트 폴더를 열 수 있다.

vue create 폴더명
cd 폴더명           // 해당 폴더로 이동
code . -r

vue는 내부적으로 webpack 번들러를 사용한다.

main.js

import { createApp } from 'Vue'
import App from './App.vue'

createApp(App).mount('#app')

createApp 앞에는 원래 Vue.라는 객체가 붙어야 하나 import를 통해 createApp을 가져오므로 생략된다.

App.vue

.vue 파일의 코드를 하이라이팅 하기 위해서는 확장 프로그램인 Vetur 를 사용한다.
vue 파일(Single File Component. SFC)은 다음의 구조로 구성된다.

template
script
style

선언적 렌더링과 입력 핸들링 (반응성)

App.vue

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<style>
h1 {
  font-size: 50px;
  color: royalblue;
}
</style>

화면에는 count의 내용이 출력되며 그것을 출력할 때마다
increase() 함수가 실행되어 count의 값이 증가한다.
count가 갱신되면 화면의 내용도 갱신된다( 반응성 )

데이터를 정의하고 그것을 갱신하는 이벤트 핸들러.

조건문과 반복문

디렉티브(Directive) : v- 으로 시작하는 속성들.
반복문의 경우 배열데이터가 필요하다.

App.vue

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
  <ul>
    <li
      v-for="fruits in fruits"
      :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<style lang="scss">
h1 {
  font-size: 50px;
  color: royalblue;
}
ul {
  li {
    font-size: 40px;
  }
}
</style>

컴포넌트 연결하기

Fruit.vue

<template>
  <li>{{ name }}</li>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss">
<!-- scoped는 해당 컴포넌트에만 유효범위를 설정한다. -->
  h1 {
    color: red !important;
  }
</style>

App.vue

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
  <ul>
    <hello
      v-for="fruits in fruits"
      :key="fruit"
      :name="fruit">
      {{ fruit }}
    </hello>
  </ul>
</template>

<script>
import Fruit from './components/Fruit' //.vue 생략 가능

export default {
  components: {
    hello: Fruit
    // Fruit: Fruit로 바꿀 수 있다.
    // 속성 이름과 데이터 이름이 같은 경우 : 뒤쪽을 생략할 수 있다.
  },
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<style lang="scss">
h1 {
  font-size: 50px;
  color: royalblue;
}
ul {
  li {
    font-size: 40px;
  }
}
</style>