Vue 객체의 기본 속성 정리

var vm = new Vue({
     //여기 정의
});

 

Vue 객체의 기본 속성들에 대해 정리해본다.

el

Vue 인스턴스가 마운트될 요소를 가르킴
예)

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

 

el: '#app'는 Vue 인스턴스를 #app 요소에 마운트함

name

Vue 컴포넌트의 이름을 나타냄

해당 컴포넌트를 다른곳에서 참조하거나 재사용할 때 유용함

<script>
export default {
  name: 'App',
  /* 생략 */
};
</script>

 

'App'이라는 컴포넌트의 이름을 나타냄

 

name 활용 예)

router.replace({name : 'main'});

 

이런식으로 페이지 이동

data

Vue 인스턴스에서 사용할 데이터를 정의
예)

data() {
    return {
      count: 0
    };
}

 

Vue에서는 데이터는 함수 형태로 리턴하는 방식으로 정의한

methods

Vue 인스턴스에서 사용할 메서드를 정의한다.
예)

methods:{
    addCount: function(number) {
      this.count = this.count + number;
    },
    showCount: function(){
      return this.count;
    }
}

computed

Vue 인스턴스에서 사용할 계산된 속성을 정의
예)

computed: {
    isLargerThanTen: function () {
      return this.count * 3 > 10 ? "10보다 큽니다." : "10보다 작거나 같습니다."
    }
}

*computed와 methods의 차이*

computed는 본인이 참조하고 있는 data가 변경될때만 호출되는데

methods는 본인이 참조하고 있는 data가 아닌 전혀 관계없는 data가 변경될때도 호출되기 때문에 비효율적이다.

watch

Vue 인스턴스에서 감시할 대상을 정의하고 해당 대상이 변경될 때 실행할 동작을 정의.
예)

watch: {
    count(newVal, oldVal){
      console.log("count is changed " + oldVal + " to " + newVal);
    }
}

 

count라는 data를 감시해서 변경이 일어나면 콘솔 출력

첫번째 패러미터엔 변경된 이후의 값, 두번째 패러미엔 변경 이전의 값이 담김

created

Vue 인스턴스가 생성된 직후에 호출되는 라이프사이클 훅을 정의.
예)

created() { 
  console.log('Vue 인스턴스가 생성되었습니다!'); 
}

 

Vue 인스턴스가 생성된 직후에 로그를 출력.

mounted

Vue 인스턴스가 마운트된 후에 호출되는 라이프사이클 훅을 정의.
예)

mounted() {
    console.log("Vue 인스턴스가 마운트되었습니다");
}

 

Vue 인스턴스가 마운트된 후에 로그를 출력.

template

Vue 인스턴스의 마크업 템플릿을 정의한다. template 옵션을 사용하여 뷰를 마크업으로 나타낼 수 있음.

<template>
  <div id="app" >
    <p>{{ showCount() }}</p>
    <p>{{isLargerThanTen}}</p>
    <button v-on:click="addCount(2)">2를 더해줘</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      count: 0
    };
  },
  methods:{
    addCount: function(number) {
      this.count = this.count + number;
    },
    showCount: function(){
      return this.count;
    }
  },
  watch: {
    count(newVal, oldVal){
      console.log("count is changed " + oldVal + " to " + newVal);
    }
  },
  computed: {
    isLargerThanTen: function () {
      return this.count * 3 > 10 ? "10보다 큽니다." : "10보다 작거나 같습니다."
    }
  },
  created() {
    console.log("Vue 인스턴스가 생성되었습니다");
  },
  mounted() {
    console.log("Vue 인스턴스가 마운트되었습니다");
  }
};
</script>

<style scoped>
/* v-cloak 디렉티브를 사용할 스타일 */
[v-cloak] {
  display: none;
}
</style>

 

그 외에도 Vue의 라이프 사이클 관련 속성들이 있다.