[Vue.js] Vue.js 기본 문법

SFC 구조( .vue 파일 구조)

.vue 파일의 구조는 기본적으로 <script>, <style>, <template> 3가지로 구성되어 있다.

 

<script>

• .vue 파일에 하나만 포함될 수 있고, 스크립트 영역이며 ES 모듈로 실행된다.
• <script> 영역에서 사용되는 하위 영역들은 아래와 같다.

영역 이름	설명
data()	- data() 영역에서 정의된 변수들은 반응적인 상태가 되어, 'this'에 노출된다. - 반응적인 상태 : 해당 변수들이 수정되면, 자동으로 재랜더링되어 화면이 갱신된다. - 'this' : <script>에서 data()영역의 변수를 꺼내쓰려면, this를 이용해서 꺼내야 한다.
methods	- methods는 변수 값을 변경하고, 업데이트할 수 있는 함수를 정의하는 영역이다. - <template> 에서는 event Listener로 사용될 수 있다.
mounted()	- mounted() 영역에서는 생명주기 훅을 정의하는 곳이다. - 즉, 컴포넌트가 호출된 후 호출되는 영역이다.
computed()	- 미리 정의된 계산식을 이용한 후 반응적으로 반환하는 기능을 정의하는 영역이다.
watch	- 특정 변수가 수정될 때마다 특정 함수가 작동되도록 하는 영역이다.    (Observer 패턴과 유사)
components	- 다른 컴포넌트를 가져와서 사용할 수 있는 영역이다. - components 영역에서 사용하기 전에 미리, import를 해둬야 한다.
props	- 부모 컴포넌트로 받는 데이터를 정의하는 영역이다.
emits & created()	- 자식 컴포넌트가 부모 컴포넌트에게 보낼 이벤트를 정의하는 영역이다. - emits 로 이벤트를 선언하고, created() 에서 이벤트를 정의한다.

 

 

<template>

• .vue 파일에 하나만 포함될 수 있고, 실제로 보여지는 영역이다.
• <script> data()영역에서 정의한 변수를 사용하려면 중괄호 2개를 이용해야 한다.
  이 때, 변수는 텍스트 형식으로 대입된다. ex) {{ msg }}
• template에서 사용되는 디렉티브로는 아래와 같다.

디렉티브 이름	설명
v-bind	- HTML 요소의 속성과 data()의 변수를 연결한다.   ex 1) <div v-bind:id="dynamicId"></div>   ex 2) <div :id="dynamicId"></div>
v-on	- HTML 요소의 이벤트 리스너를 정의할 때 사용한다.   ex 1) <button v-on:click="increment">{{cnt}}</button>   ex 2) <button @click="increment>{{cnt}}</button> - 위 예시 중 increment는 <script>의 methods 에서 정의한 함수이다.
v-model	- HTML 입력 요소와 data()의 변수를 양방향 매핑할 때 사용한다. - HTML 입력 요소에 입력 시, data()의 변수도 자동으로 update가 되며,   반대로 data()의 변수가 변경되면 HTML 입력 요소도 자동으로 update가 된다.   ex) <input v-model="name" />
v-if / v-else-if / v-else	- HTML 요소를 조건에 따라 렌더링할 때 사용한다. - 조건이 참일 때만 랜더링하며, 거짓일 때는 랜더링하지 않는다.   ex)    <h1 v-if="isTrue">진실</h1>   <h1 v-else>거짓</h1>
v-for	- data()의 변수 배열을 반복하여, HTML 랜더링할 때 사용한다.   ex)    <ul>       <li v-for="p in persons" :key="p.id">           {{ p.name}}       </li>   </ul> - 자료 배열을 update하는 방법   1) 변경 메서드를 호출(copyWithin, fill, pop, push, reverse, shift, sort, splice, unshift)   2) 배열 자체를 교체
v-show	- v-if 처럼, 조건이 거짓이라면 요소를 보여주지 않는다. - v-if 는 HTML 요소 자체를 삭제하지만, v-show는 css로 display:none을 줘서 안보이게 한다.

 

<style>

• .vue 파일에 여러 개가 포함될 수 있고, 스타일을 정의하는 영역이다.

 

 

https://v3-docs.vuejs-korea.org/tutorial/#step-1

Tutorial | Vue.js