[vue] 기초 문법

haryun·2022년 9월 20일

vue vue3

Vue.js

목록 보기

1/1

fastcampus part9. Vue.js 강의 내용 정리

📖 Vue 기초 문법 정리

✏️ Vue.js 란?

vue.js는 프론트엔드 오픈소스 프레임워크 중 하나로 Single Page Application을 만드는 데에 용이하다. 컴포넌트로 구성이 가능하기 때문에 모듈화, 코드의 재사용이 용이한 장점이 있다.
참고링크

✏️ 기본 형태

<template>
  html tag 작성
</template>

<script>
  export default {
    script문 작성
  }
</script>

<style>
 	css, scss 작성
</style>

vue.js의 파일 구조는 template, script, style tag로 이루어져있다.

1. template tag

<template>
  <h1 @click="increase"> <!-- onclick과 동일한 기능 값으로 함수명을 지정하여 사용 -->
    {{ count }} <!-- script문에서 선언한 변수를 {{}} 기호 안에 작성하여 사용 -->
  </h1>
</template>

2. script tag

<script>
  export default {
    data() { // 사용할 데이터를 정의
      return {
        count: 0 // 변수 선언
      }
    },
    methods: { // 사용할 함수를 정의
      increase() {
        this.count += 1 // this -> script의 내용 지칭 
      }
    }
  }
</script>

3. style tag

// 기존 사용법과 동일
<style> 
  h1 { 
    font-size: 50px; 
    color: royalblue;
  }
</style>

✏️ v-if

<template>
  <div @click="increase"> {{ count }} </div>
  <div v-if="count > 5"> 
      5보다 큽니다!
  </div>
</template>

tag에 v-if="" 키워드를 명시하여 if문 작성이 가능하다.

✏️ v-for

<template>
	...
    <ul>
    	<li v-for="fruit in fruits" 
          :key="fruit">
          {{ fruit }}
      	</li>
    </ul>
</template>

<script>
	...
    data() {
      return {
        fruits: ['apple', 'banana', 'cherry']
      }
    },
</script>

v-for 키워드를 작성하여 배열의 아이템을 사용할 수 있다.
(v-for="item in Array" :key="item" 형식으로 작성)

✏️ components

외부에 작성한 .vue 파일을 script구문에 import 하여 사용할 수 있다.

<script>
  import Fruit from '~/components/Fruit'
	export default {
    	components: {
     	 Fruit // 객체데이터의 속성과 값이 같으면 뒤 생략 가능
    	},
   		... 
   }
</script>

이렇게 불러온 컴포넌트는 template 영역에서 tag로 사용이 가능하다.

<template>
	<Fruit> 이곳엔 Fruit.vue 파일의 내용이 출력된다. </Fruit>
</template>

✏️ scoped

위의 경우처럼 component를 사용할 경우 작성한 style이 서로에게 영향을 줄 수 있다.

<style scoped>
	...
</style>

scope 키워드를 작성하여 스타일 지정영역을 해당 컴포넌트로 정의한다. (유효범위를 지정하는 것)

haryun