코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 2일차

3장 뷰 기본 문법 익히기

 3.1 뷰 애플리케이션 기본 구조

package.json, index.html, main.js, App.vue 파일에 대한 기본 구조

NPM 설치 후 기본구조

 3.2 뷰 애플리케이션 인스턴스

인스턴스는 클래스의 실체화된 객체를 의미하고, 인스턴스를 생성하는 코드는 src/main.js 파일에 작성한다.

인스턴스 구성 요소는 data, methods, render와 같은 속성들이다.

구성 요소의 코드가 길어지면 가독성이 떨어지고 코드의 유지보수가 어려워 SFC(Single File Component), 일명 *.vue 파일을 따로 작성하여 문제를 해결

SFC의 구조 <script>, <template>, <style> 3가지 태그 영역으로 구성

<script>: 자바스크립트

<template>: html

<style>: CSS 스타일

 3.3 기본 문법 다루기

옵션스 API 사용하기

데이터 정의하기

<script>
export default {
  data: function () {
    return {};
  },
}
</script>

데이터 보간 사용하기

{{ 데이터 속성 }}

<script>
export default {
  data() {
    return {
      name: '철수',
      age: 19,
    };
  },
}
</script>>
<template>
  {{ name }}
  {{ age }}
</template>
<style></style>

디렉티브 사용하기(v-)

v-html

v-text

v-pre

v-bind

v-if/v-else-if/f-else

v-show

v-cloak

v-for

오늘은 둘째날로 뷰에서 사용하는 기본 구조에 대해서 배웠습니다.