Vue의 옵션 구성

마운트할 요소

el는 링크 응용 요소의 선택기이다

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

애플리케이션에 사용되는 데이터

data는 애플리케이션에 사용되는 데이터입니다.
객체 또는 배열을 등록할 수 있습니다.

new Vue({
    el: '#app',
    data: {
    message: 'Vue.js'
    }
})

계산 속성

computed는 함수로 계산된 데이터다.data와 같은 느낌으로 사용 가능합니다.

new Vue({
    el: '#app',
    computed: {
    computedMessage: function() {
      //何か処理をした結果をデータとして返す
      return this.message + '!'
    }
  }
})

라이프 사이클

ライフサイクル는 일정한 순환을 나타낸다.フック Vue 실례의 특정 시간에 미리 등록된 처리를 자동으로 호출합니다.

사용 가능한 라이프 사이클

created 라이프 사이클 해커 중 한 명created 이 방법을 등록한 Vue의 실례를 만들고 데이터 감시 등 주변의 초기화가 끝난 후에 호출합니다

new Vue({
    el: '#app',
    created: function() {
    //このインスタンスの作成&初期化が終わってらすぐ
        console.log('created')
    }
})

사용 가능한 라이프 사이클 해커 방법

메서드
타이밍
beforeCreate
실례를 만들고 초기화하기 전에
created
인스턴스 생성 및 초기화 후 활성화
beforeMount
인스턴스를 마운트하기 전에
mounted
인스턴스 마운트 후
beforeUpdate
데이터가 변경되고 DOM에 맞춰지기 전에
updated
DOM에 맞게 데이터가 변경된 후
beforeDestroy
Vue 인스턴스가 손상되기 전에
destroyed
Vue 인스턴스가 손상된 후
errorCaptured
모든 자손 구성 요소가 오류를 보충할 때

어플리케이션 사용 방법

methods는 응용 프로그램에서 사용하는 방법이다.
코드 관리에 편리하도록 헤더 처리, 사건 판도라 등 상세한 설치를 맡았다.

new Vue({
  el: '#app',
  methods: {
    myMethod: function() {
       //処理
    }
  }
})

vue 라이프 사이클 다이어그램