Vue.js 란? Vue.js 사용방법 1편

이번 포스팅은 CDN 코드를 사용하지 않고 VS CODE에서 직접 설치해 사용하는 방법에 대해 소개한다.

Vue 란?

MVVM 패턴의 View Model 레이어 라이브러리이다. 

 

Vue 생성하는 방법

Vue, VSCode 환경설정. Axios, Vue-Router 프로젝트 생성

 

 

Vue의 Directive

Vue 의 기본적인 Directive (지시자) 는 아래 CDN 코드를 이용한 사용법에 소개되어있다.

Vue.js 사용법 1 (CDN 코드 이용)

 

 

 

Vue 시작하기

시작하기에 앞서, Vue 의 기본적인 흐름을 알아야 한다. 

 

Components

Vue 컴포넌트는 Vue.js의 뷰 (View) 영역을 구성하는 부분이다. HTML, CSS, JavaScript 로직을 포함한다. 아래 Vue 기본구조에서 더 상세한 설명을 다루고 있다.

 

 

 

Router

다른 URL 경로에 따라 애플리케이션의 다른 뷰 페이지를 관리한다. Router를 사용하면 페이지 간의 전환을 쉽게 구현할 수 있다. 

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' //실행될 컴포넌트 상대경로
import Memjoin from '@/components/member/MemJoin.vue' //절대 경로

const routes = [
  {
    path: '/', //1. root 라는 경로로 링크 요청이 오면
    name: 'home', //1. 이름: home으로 요청이 오면
    component: HomeView //2. component는 HomeView 실행 
  }
  ]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 

 

 

Vue.js 기본 구조 (Components)

크게 template, script, style로 나누어져 있다. 

<template lang="">
    <div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="">
    
</style>

 

 

<template>

기본 html의 body 부분이라고 생각하면 된다. 사용자에게 표시되는 컴포넌트들의 구조와 내용을 나타낸다.  주로 사용하던 input 태그, <table>, <h1> 등 태그를 실제로 구현하는 부분이다.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
  </div>
</template>

 

<script>

자바 스크립트를 구현하는 부분이다. script에 들어가는 내용으로는 컴포넌트의 data, methods, computed 등이 들어간다. 컴포넌트의 동작을 제어하고 데이터를 처리하는 데 사용된다. 여기서는 data, methods 만 설명하고 넘어간다. 다음 포스팅에서 전부 정리해서 올리려고 한다.

 

 

data

data 객체 안에는 숫자, 문자열, 객체, 배열 등이 들어간다. 스크립트 내에서 정의해줄때는 return 을 사용해야한다.

data() {
    return {
      id: '',
      pwd: '',
      name: '',
      email: '',
      type: 0,
      msg: ''
    }
  },

 

 

methods

template 내에 추가한 이벤트들을 실행한다. 

//template 내에서 아래와 같은 detail 함수를 실행
<td><a v-on:click="detail(order.prod.num)">{{order.prod.name}}</a></td>

 //methods 에서 처리. template에서 click Directive를 사용했으므로 클릭마다 detail함수 처리
 methods:{
    detail(num){
        //alert(num)
        this.$router.push({name:'OrderDetail', query:{num:num}})
    }
  }

 

,로 연결하며 여러개의 메소드를 작성할 수 있다. 

methods: {
    join() {

    },
    idcheck() {
     
    }
  }

 

AJAX (비동기) 기능도 사용이 가능하다. AXIOS 설치해야 가능하다. (설치 참고링크: https://skylarcoding.tistory.com/121) 

idcheck() {
      const self = this; //현재의 컴포넌트 객체
      self.$axios.get('/members/' + self.id) //비동기 요청
        .then(function (res) { //요청 결과 받아옴. 파람에 저장, res.data가 백에서 전송한 데이터이다.
          if (res.status == 200) {
            if (res.data.dto == null) {
              self.msg = '사용 가능한 아이디'
            } else {
              self.msg = '중복된 아이디'
              self.id = ''
            }
          } else {
            alert('에러코드:' + res.status)
          }
        })
    }

 

 

<style>

간단하게 말하면 CSS 부분이다. 컴포넌트의 스타일을 정의한다.

<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}</style>