Vue.js 기초 개념

Vue.js는 웹프론트엔드 프레임워크

- 컴포넌트 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프레임워크

 

컴포넌트 (Component)

- 웹을 구성하는 로고, 메뉴바, 버튼 모달창 등 웹 페이지 내의 다양한 UI 요소

- 재사용 가능하도록 구조화 한 것

 

SPA (Single Page Application)

- 단일 페이지 어플리케이션

- 하나의 페이지 안에서 필요한 영역 부분만 로딩되는 형태

- 빠른 페이지 전환

- 적은 트래픽 양

 

npm install -g @vue/cli

vue/cli 를 이용해서 자동으로 폴더구조, 필요한 라이브러리를 손쉽게 다운로드 받을 수 있어서 해당 명령어를 사용해서 프로젝트를 생성할 수 있다.

 

vue create '폴더이름'

해당 폴더 이름으로 vue 프로젝트가 생성된다.

다음 명령어를 사용하면 vue 2, 3 버전을 선택할 수 있고, 안에 들어가는 라이브러리도 직접 선택할 수도 있다.

자동으로 선택할 경우에는 babel, eslint 를 사용하게 된다.

 

 

라우팅 (routing)

- 웹 페이지간에 이동하는 방법을 말하는 것

 

 

beforeMount : 컴포넌트가 DOM에 추가되기 직전에 실행됨

mounted : 컴포넌트가 DOM에 추가된 후에 실행됨

beforeUpdate : 컴포넌트가 DOM에 추가된 후에 data가 변화가 되어 재렌더링이 일어나기 전에 실행

updated : 컴포넌트가 DOM에 추가된 후에 data가 변화가 되어 재렌더링이 일어난 후에 실행

beforeDestory : 실제 컴포넌트를 빠져나가거나 다른 컴포넌트로 이동할 때 해당 컴포넌트가 제거되기 직전에 실행

destroyed : 실제 컴포넌트를 빠져나가거나 다른 컴포넌트로 이동할 때 해당 컴포넌트가 완전히 제거된 후에 실행

 

 

<template>
  <div>
    <!--  data() 에서 정의한 데이터들을 template에 바인딩시켜서 사용할 수 있음  -->
    <h1>Welcome to {{ title }}!</h1>
    <!--  html input 태그의 value 속성을 v-model을 이용해서 데이터 바인딩 시킬 수 있다 (2-way 바인딩)  -->
    <input type="text" v-model="input1" />
    <button type="button" @click="getData">Get</button>
    <button type="button" @click="setData">Set</button>

    <!--  v-for를 통해 select box 구현 / key를 꼭 넣어줘야 함  -->
    <select class="form-control" v-model="region" @change="changeRegion">
      <option :key="i" :value="d.v" v-for="(d,i) in options">{{ d.t }}</option>
    </select>

    <!--
      v-if 조건을 만족하면 table이 보임
      v-show도 v-if 똑같이 작동됨
      v-if와 v-show의 차이점? v-if는 조건에 맞지 않으면 화면에 렌더링을 하지 않음, v-show는 무조건 화면에 렌더링을 함
      화면을 보였다 안보였다를 자주 해야 하는 경우에는 v-if는 렌더링이 자주되기 때문에 리소스가 많이 투여됨, 고로 v-show를 사용해주는게 좋다
      -->
    <table class="table table-bordered" v-if="tableShow">
      <tr :key="i" v-for="(d,i) in options">
        <td>{{ d.v }}</td>
        <td>{{ d.t }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 사용하고 싶은 데이터를 이곳에서 정의함
      title: "Vue 개념",
      title2: "Seoul",
      input1: "abc",
      options: [
        { v: "S", t: "Seoul" },
        { v: "J", t: "Jeju" },
        { v: "B", t: "Busan" },
      ],
      region: "J",
      tableShow: false
    };
  },
  // 특정 데이터 변경을 모니터링 하고 싶을 때 watch를 사용할 수 있음, 데이터가 변경될 때마다 관찰해주는 메소드
  // 모니터링 하고 싶은 데이터명으로 메소드를 만들어줘야 사용 가능함
  watch: {
    input1() {
      console.log(this.input1);
    }
  },
  methods: {
    getData() {
      alert(this.input1)
    },
    setData() {
      this.input1 = "12345";
    },
    changeRegion() {
      alert(this.region);
    }
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  }
}
</script>

 

출처

https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

The Vue Instance — Vue.js

https://www.youtube.com/watch?v=sqH0u8wN4Rs