본문 바로가기

Vue를 실행시기키 위해서는 먼저 Vue.js를 import를 한 후 Vue 인스턴스를 생성해야 합니다.
Vue인스턴스를 생성할때 지정된 몇가지 옵션 객체를 전달해야 하는데 이 옵션객체들이 어떤것이 있고 어떻게 사용되는지 간단히 정리하려고 합니다.

Vue 인스턴스란?

Vue를 실행하기 위해 첫번째로 정의 하고 생성해야 하는 객체입니다.

Vue 인스턴스 예제

var vm = new Vue ({
  el : '#test',
  data : { name : '홍길동'},
})
옵션 설명 예제 비고
el Vue가 실행될 HTML의 DOM 요소를 지정 el : '#test' CSS의 선택자를 선택하듯이 선택 (#--> id 지정, . --> 클레스 지정)
data Vue가 바라보는 data 객체를 지정 data : { name : '홍길동'} 직접 객체를 작성해도 되고 미리 선언된 객체변수를 작성해도 됨
computed 함수로 정의하고 data객체 등을 사용하여 계산된 값을 리턴해 줌. methods와 차이점은 캐싱을 시켜놓고 동일한 요청이 또 올 경우는 함수를 실행하지 않고 캐싱된 값만 리턴해 줌 computed : { sum1 : function() {retuen 3 + 4}} 화살표함수는 사용 불가
methods 함수로 정의하고 data객체 등을 사용하여 계산된 값을 리턴해 줌. computed와 차이점은 캐싱이 되지 않고 호출될때마다 계속 함수를 실행함 methods : { sum2 : function() {retuen 3 + 4}} 화살표함수는 사용 불가
watch 지정된 변수를 계속 지켜보고 있다가 값이 변경되었을때 정의된 함수를 실행시킴 watch : { x : function(v) {retuen v++ }} x는 관찰하고자 하는 지정된 변수, 긴 시간이 필요한 비동기 처리가 필요할 경우 주로 사용됨(axios, fetch 등등..)

UX 공작소

고급지게 만들어 저렴하게 배포는 공작소