Vue.js 기본

📝 목차

• Vue.js 공식 레퍼런스

  • Vue.js 스타일 가이드
  • CLI를 사용하지 않을 때 로딩해야하는 Script
• 전역 컴포넌트, 지역 컴포넌트

  • 전역 컴포넌트
  • 지역 컴포넌트
• 여러가지 변수들

  • data 사용 방법
  • computed 사용 방법
  •  
  • watch 사용 방법
• 컴포넌트 통신 규칙

  • Props 사용 방법
  • Event Emit 사용 방법
• Router

  • Vue Router 공식 문서
  • Router
  • 필수 Import
  • 사용 방법
• 웹 통신
• Template 문법

  • 데이터 바인딩
  • 디렉티브
  • 'Coding > [Web] Frontend' 카테고리의 다른 글

---

Vue.js

Vue는 React와 함께 주로 사용되는 frontend framework이다.

데이터가 변경되었을 때 그 부분만 따로 수정하거나 리렌더링할 수 있도록 해주는 등의 reactivity를 위해서 사용된다.

 

Vue.js 공식 레퍼런스

Vue.js - The Progressive JavaScript Framework | Vue.js

 

Vue.js 스타일 가이드

Style Guide — Vue.js

 

CLI를 사용하지 않을 때 로딩해야하는 Script

아래 스크립트는 기본으로 로딩해야 한다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

---

전역 컴포넌트, 지역 컴포넌트

전역 컴포넌트

전역적으로 선언된 컴포넌트이다.

하나만 생성하면 자동으로 모든 인스턴스에 등록이 된다.

 

형식

Vue.component("컴포넌트 이름", "컴포넌트 내용");

 

예시

Vue.component(
  "app-header", {
    template: "<h1>Header</h1>",
});

 

지역 컴포넌트

인스턴스 내에 선언된 컴포넌트이다. (지역적 선언)

선언한 인스턴스 안에서만 등록이 되기 때문에 등록되지 않은 다른 인스턴스에서는 보이지 않는다.

 

형식

new Vue({
  // 인스턴스
  el: "인스턴스의 타겟",
  components: {
    // componet's' -> s 필수!
    "컴포넌트 이름": "컴포넌트 내용",
  },
});

 

예시

new Vue({
  // 인스턴스
  el: "#app",
  components: {
    // 다른 인스턴스에서는 렌더링 되지 않음
    "app-header": {
      template: "<footer>footer</footer>",
    },
  },
});

 

---

여러가지 변수들

data 사용 방법

컴포넌트 내의 변수로써 템플릿을 사용하여 화면단에 렌더링 할 수 있다.

<div id="#app">
	{{ num }}
</div>
 
<script>
    new Vue({
      el: "#app",
      data: {
        num: 10,
      },
    });
</script>

 

computed 사용 방법

연산의 결과가 변수의 값이 되는 상황에서 주로 사용한다.

data처럼 템플릿을 활용하여 렌더링 할 수도 있다.

 

사용 시 함수 안에 return이 이루어져야 정상적으로 변수에 값이 대입된다.

new Vue({
  // ...
  computed: {
    "변수 이름": function () {
      // 연산
      return "최종 값";
    },
  },
});

 

watch 사용 방법

data 내의 변수가 바뀌는 것을 트리거로 watch의 함수가 실행된다.

 

대부분의 경우 computed를 이용하는 것이 좋고, 무거운 동작이나 비동기 등의 경우에만 watch를 사용하는 것이 좋다.

new Vue({
    data: {
      num: 10,
    },
    computed: {
      "변수 이름": function () {
        // 연산
        return "최종 값";
      },
    },
});

 

---

컴포넌트 통신 규칙

통신의 방향성이 정해지지 않고 유기적으로 연결될 경우, 오류가 발생하기 쉽고 추적이 어렵다.

통신에 방향성을 정해준다면 오류를 줄일 수 있고 추적이 용이해진다.

 

• 부모 컴포넌트 → 자식 컴포넌트 : props 전달
• 자식 컴포넌트 → 부모 컴포넌트 : event 전달

 

Props 사용 방법

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다.

 

태그 안에 v-bind 속성을 추가함으로써 props를 사용할 수 있다.

v-bind는 함수/동적값 등을 html tag의 속성을 연결시켜주는 역할을 한다.

 

형식

<app-header v-bind: "props 속성 이름"="상위 컴포넌트의 data 이름"></app-header>

 

예시

<!-- 상위 컴포넌트 -->
<div id="app">
  <!-- 하위 컴포넌트 -->
  <app-header v-bind:nameProp="nameData"></app-header>
</div>

 

Event Emit 사용 방법

자식 컴포넌트에서 부모 컴포넌트로 데이터 전달/이벤트 발생을 원할 때 사용한다.

 

태그 안에 v-on 속성을 추가함으로써 사용할 수 있다.

 

형식

<app-header v-on:"하위 컴포넌트에서 발생한 이벤트 이름 (A)"="상위 컴포넌트의 메소드 이름 (B)"></app-header>
 
<script>
    const appHeader = {
      template: "<button v-on:click='실행할 메소드 이름 (C)'>button</button>"
      methods: {
        "실행할 메소드 이름 (C)": function () { // -> arrow function 사용 불가
          this.$emit("발생시킬 이벤트 이름 (A)");
        }
      }
    }
    new Vue({
      // ...
      methods: {
        "상위 컴포넌트의 메소드 이름 (B)": () => {
          // ...
        }
      }
    })
</script>

 

예시

<div id="app">
  <app-header v-on:passEventName="logText"></app-header>
</div>
 
<!-- ... -->
<script>
    const appHeader = {
      template: `<button v-on:click="passEvent">click</button>`,
      methods: {
        passEvent: function () {
          this.$emit("passEventName");
        },
      },
    };
 
    new Vue({
      el: "#app",
      components: {
        "app-header": appHeader,
      },
      methods: {
        logText: () => {
          console.log("hi");
        },
      },
    });
</script>

 

---

Router

Vue Router 공식 문서

Vue Router

 

Router

React에서의 router와 비슷한 역할을 한다.

 

URL에 따라 다른 페이지를 렌더링 할 수 있게 해준다.

이 때 하나의 페이지는 하나의 컴포넌트가 된다.

 

필수 Import

아래 두 개의 script를 import해야 한다.

단, import하는 순서를 잘 맞춰야 한다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>

 

사용 방법

React처럼 404 not found를 위해 path: "*"를 이용할 수 있다.

 

예시

const router = new VueRouter({
    mode: "history", // url에 hash(#) 제거 (optional)
    // routes : 페이지의 라우팅 정보(배열)
    routes: [
      // 각 페이지에 대한 정보 (객체)
      {
        path: "url",
        // 페이지에 뿌려질 컴포넌트는 하나 -> not component's'
        component: "해당 url에서 표시될 컴포넌트",
      },
    ],
});
 
new Vue({
    el: "element",
    router: router,
});

 

---

웹 통신

비동기처리를 위해 이전에는 vue resource 라이브러리를 공식 지원하였으나,

지금은 중단되고 axios를 이용하는 것을 권장하고 있다.

 

---

Template 문법

데이터 바인딩

데이터를 표시하기 위해 사용한다.

 

사용

{{ data의 key }}

 

디렉티브

v-로 시작하는 tag의 속성들을 의미한다.

 

여러종류가 있으며, 대표적인 몇가지만 다루겠다.

• v-bind
  • tag의 속성과 인스턴스의 내용을 bind 한다.
  • 예시 : v-bind:class="class명"
  • 예시2 : v-bind:class{ "class 명": "조건" }
    
    • 조건절이 true이면 class명이 들어가고 아니면 들어가지 않는다.
• v-if / v-else
  
  • if 조건 내에 따라 show/hide할 수 있다.
  • 사용 방법
    <tag v-if="조건">...</tag>
<tag v-else>...</tag>

•  v-show
  • 조건에 따라 display를 none으로 만들 수 있음
  • 조건이 false일 경우 style의 display가 none으로 변경됨
  • 사용 방법 : <tag v-show="조건">...</tag>

• v-on
  • key up/down, onclick 등 마우스/키보드 입력에 대해 지정할 수 있는 속성
  • 주로 on~로 시작하는 속성에 대입하기 위해 사용된다. (예 : onclick, onkeydown, onsubmit 등)
  • 사용 방법 : <tag v-on:click="함수이름>...
  • 특이사항 : submit
    • submit.prevent="함수 이름"
      • form에서 submit 시 새로고침을 방지하기 위해 사용하는 event.preventDefault();와 동일한 역할을 한다.
      • 예 : v-on:submit.prevent="submitForm"
• v-model
  • input 태그에 입력된 값이 data의 변수에 대입되도록 해주는 속성
  • 사용 방법 : <tag v-model="data 변수 이름">...</tag>