[Vue] 1. Vueインスタンス

vuejs.org-Vueインスタンス
すべてのVueアプリケーションは、Vue関数を使用して新しいインスタンスを作成することから始まります.

let vm = new Vue({
  // 옵션
})

Vueインスタンスを作成するときは、オプションオブジェクトを渡す必要があります.

データとメソッド

Vueインスタンスを作成すると、データ・オブジェクトのすべてのプロパティがVueの反作用システムに追加されます.各プロパティ値が変化すると、ビューはそれに応じて更新され、新しい値に一致します.

// 데이터 객체
let data = { a: 1};

// Vue 인스턴스에 데이터 객체 추가
let vm = new Vue({
  data: data;
})

// 인스턴스에 있는 속성은 원본 데이터의 값 반환
vm.a ==== data.a // 결과 : true

// 인스턴스의 속성값을 변경하면 원본 데이터에도 영ㅇ향
vm.a = 2;
console.log(data.a); // 결과 : 2

// 반대도 마찬가지
data.a = 3;
console.log(vm.a); // 결과 : 3

データが変更されると、画面が再レンダリングされます.
ここで、dataの属性は、インスタンスの作成時に存在する属性のみが逆作用であることに注意してください.つまり、新しいプロパティの追加と変更は画面をリフレッシュしません.
後続のプロパティが必要で、NULLまたは存在しない状態で開始する場合は、初期値を指定する必要があります.

// 초기값 지정 예시
data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

Object.freeze()を使用すると、既存の属性の変更を防止し、反応性システムの追跡を防止することができる.この場合、プロパティ値の変更中にエラーが発生しました

練習する。

<!-- index.html -->
<div id="app-8">
  <p>{{ kim.age }}</p>
</div>

// index.js
let kim = {age:26};
let vm = new Vue({
  el: '#app-8',
  data: {
    kim
  }
})
// 속성값 변경
kim.age = 30;
vm.kim.age = 40;

Vueオブジェクトを作成する場合は、data、template、el、method、lifecycle hookなどのインスタンスオプションプロパティを含めることができます.$接頭辞を貼り付けて、他のカスタム属性を区別します.
Vue API-インスタンスプロパティ

let data = { a:1};
let vm = new Vue({
  el: '#exmaple',
  data : data
})

vm.$data === data // 결과 : true
vm.$el === document.getElementById('example') // 결과 : true

インスタンスライフサイクルフック

各インスタンスは、作成時に一連の初期化ステップを経ます.このプロセスでは、カスタムロジックを実行できるライフサイクルフックも呼び出されます.インスタンス作成後にcreatedフックを呼び出す

new Vue({
  data: {
    a: 1
  },
  created: function() {
    // this는 vm 인스턴스를 가리킵니다.
    cosnole.log('a is ' + this.a); // 결과: a is 1
  }
})

すべてのライフサイクルフックは、thisによって呼び出されたVueインスタンスを指します.