Vue - 1

Vue3 공식 사이트
https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html

백엔드 개발자로써 프로젝트 완성도를 위해 프론트 프레임워크인 VUE를 학습한다.

패스트 캠퍼스 vue 강의 부분을 학습겸 정리하기 위해 작성하는 게시물 입니다.

---

Vue cli설치 : vue 명령어를 사용할 수 있도록 함

npm i -g @vue/cli

VUE 프로젝트 생성

vue create 프로젝트 이름 입력 -> 선택창에서 vue3로 설치

vue cli로 설치하면 내부적으로 webpack, eslint, babel등을 관리하고 있다.

그럼 vue구조와 문법을 간단히 알아보자

App.vue 구조

<template>
	html코드를 작성합니다.
	<h1 @click = 'increase'>              //클릭했을때 작동하도록함
    {{ count }} 
    </h1>     
    
    <div v-if = "count > 4">                     //if문, 조건을 건다
    	4보다 큽니다
    </div>
    
    <ul>
      <li v-for="fruit in fruits"  //for문, script의 배열 데이터를 사용합니다.
      :key="fruit">                //고유데이터라고 명시합니다, 
        {{fruit}}
      </li>
    </ul>
</template>

<script>
	vue문법으로 스크립트 작성
   import Fruit from 'Fruit가 들어있는 경로'
export default{
  data() { //function이 생략되어있습니다. 함수 입니다. 
    return {
      count : 0,
      fruits:['Apple', 'banana', 'Cherry'] //배열데이터
    }
  },
  methods: {
    increase() { //@click에서 작동합니다. 
      this.count += 1
    }
  }
}
</script>

<style lang = "scss"> //scss로 작성하겠습니다.
	css,scss 등을 작성.
</style>

Fruit.Vue

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

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

<style scoped lang = "scss"> //scoped : 이 컴포넌트 안에 있는 것만 제어하겠습니다. 
                             //App.vue의 요소들은 건들지 못함
	h1 {
    	color: red !important;
    }
</style>

간단히 한번 훑어보았습니다.,