[Vue.js] vue.js 문법과 사용방법

Component :

Vue.js에서 컴포넌트는 재사용 가능한 UI 요소를 의미합니다. 각 컴포넌트는 자체적으로 데이터, 메서드, 스타일 등을 포함할 수 있습니다. 컴포넌트를 사용하여 애플리케이션을 작은 조각으로 나누고 각 조각을 개별적으로 관리할 수 있습니다.

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: () => ({ message: 'Hello, World!' })
});

 

Computed :

계산된 속성은 의존하는 데이터의 값에 기반하여 동적으로 값을 계산하는 속성입니다. 계산된 속성은 종속성을 갖는 데이터가 변경될 때만 다시 계산됩니다.

new Vue({
  data: { message: 'Hello, World!' },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});

 

Watch :

Watch는 데이터의 변화를 감시하고, 변화에 대응하는 동작을 수행합니다. 주로 비동기 작업이나 데이터 변경에 따른 추가적인 로직을 처리할 때 사용됩니다.

new Vue({
  data: { message: 'Hello, World!' },
  watch: {
    message: function(newValue, oldValue) {
      console.log(`메시지가 변경되었습니다: ${oldValue} -> ${newValue}`);
    }
  }
});

 

Mounted :

Vue 인스턴스가 화면에 부착되고 동작하기 시작하는 단계를 의미합니다. 보통 new Vue()로 인스턴스를 생성하고, el 속성에 지정한 엘리먼트에 부착됩니다.

new Vue({
  data: { message: 'Hello, World!' },
  mounted: function() {
    console.log('Vue 인스턴스가 마운트되었습니다.');
  }
});

 

created :

created 훅은 Vue 인스턴스가 생성된 직후에 호출됩니다. 이 시점에서는 컴포넌트가 아직 화면에 부착되기 전이므로 DOM에 접근할 수 없습니다. 주로 초기 데이터 설정, 비동기 작업의 시작 등을 수행합니다.

new Vue({
  created() {
    console.log('인스턴스가 생성되었습니다.');
    console.log('이 시점에서는 화면에 부착되기 전입니다.');
  }
});

 

 

Routing :

라우팅은 다른 페이지나 뷰 간에 이동하는 방법을 관리하는 기능입니다. Vue에서는 Vue Router를 사용하여 라우팅을 처리합니다. 이를 통해 싱글 페이지 애플리케이션 (SPA)을 개발할 수 있습니다.

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Home = { template: '<div>홈 페이지</div>' };
const About = { template: '<div>소개 페이지</div>' };

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({ routes });

new Vue({ el: '#app', router });



<!-- index.html -->
<div id="app">
  <router-link to="/">홈</router-link>
  <router-link to="/about">소개</router-link>
  <router-view></router-view>
</div>

 

---

 

전체 예제 >

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`메시지가 변경되었습니다: ${oldValue} -> ${newValue}`);
    }
  },
  mounted() {
    console.log('컴포넌트가 화면에 부착되었습니다.');
  }
});

new Vue({
  el: '#app'
});