캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.

IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools

---

이전 시간에는 뷰 인스턴스 생성자 함수에서 el속성을 써봤다.

new Vue()로 만드는 뷰 인스턴스 생성자를 배웠다.

new Vue();

생성자 함수의 장점

인스턴스 생성과 동시에 객체와 관련되어 정의된 속성과 메서드에 바로 접근 가능.

뷰 인스턴스를 생성함과 동시에 객체가 기능과 속성을 이미 갖추고 있는 상태로 생성.

el 속성 값인 #app은 app이라는 id를 가진 div 태그요소를 의미한다.

인스턴스 옵션 속성

인스턴스에서 사용할 수 있는 속성과 API를 몇 개 살펴보자.

핵심은 인스턴스의 옵션을 Key-Value 쌍으로 정의하여 사용한다는 것.

new Vue({
  el: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

• el: HTML 태그 식별자 id
• data: Reactivity 기반으로 데이터 변경하는 속성
• methods: 화면을 제어하기 위한 로직을 정의하는 메서드
• created: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의하는 속성
• watch: 인스턴스에서 표현식이나 함수를 감시하는 메서드

콤마로 구분하여 여러 속성과 메서드를 정의할 수 있다.

Vue.js API 공식문서 :Vue의 전역설정을 가진 객체

데이터와 메소드

option이라는 이름의 객체를 만들자.

var option = {}

el속성, data속성, method메서드를 추가하자.

var option = {
        el: '#app',
        data: {

        },
        methods:{

        }
}

new Vue() 뷰 인스턴스가 위의 속성과 메서드를 갖게 하자.

var option = {
        el: '#app',
        data: {

        },
        methods:{

        }
}

var vm = new Vue(option);  // 이렇게 할당 할 수 있다. 

뷰 인스턴스의 속성과 메서드를 넣자.

객체의 이름을 생략하고 속성과 옵션을 넣으면 깔끔하다.

뷰 인스턴스 생성자 안에 '객체'가 들어갈 수 있다.

var vm = new Vue({
        el: '#app',
        data: {

        },
        methods:{

        }
})

---

다음 시간에는 컴포넌트를 공부한다.