Vue.js 공부 기록(2) - 뷰 인스턴스(Instance) 생성, 메서드(Methods)

🔍 Vue 인스턴스

• 뷰 인스턴스(Instance)는 Vue.js로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.
• Vue 생성자는 미리 정의된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장될 수 있다.
• 뷰 인스턴스 생성 시에는 데이터, 템플릿, 메소드 등의 옵션을 포함할 수 있는 options 객체를 전달해야 한다.

 

 

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

• el (string | HTMLElement) : 대상이 되는 html element 또는 css selector (vm.el)
• template (string) : Vue 인스턴스의 마크업으로 사용할 문자열 템플릿
• data(Object | Function) : 화면을 그리는데 사용하는 data를 반환하는 함수 or data 객체
• props (Arrays<string> | Object) : 부모 컴포넌트로부터 전달받은 property들의 Array or Object
• methods ([key:string] : Function) : Vue 인스턴스에서 사용되는 메소드, this 컨텍스트를 Vue 인스턴스에 바인딩함
• computed ([key:string] : Function | {get: Function, set: Function}) : 계산된 속성. getter와 setter는 자동으로 this 컨텍스트를 Vue 인스턴스에 바인딩함
• watch ([key:string]: string | Function | Object | Array) : 감시된 속성. Vue 인스턴스에 데이터가 변경되는 시점에 호출.

new Vue({
	el : '#app',
    template: '',
    data: {},
    props: [], //{}
    methods: {},
    computed: {},
    watch: {}
});

 

🔍 Vue 인스턴스 생성하기

 

VS Code에 아래와 같이 간단한 html을 작성, 저장 후 index.html을 실행해 보면

설정해둔 title, 그리고 Hello World가 잘 출력되는 것을 확인할 수 있다.

 

new Vue로 인스턴스를 생성 후 el, data를 옵션에 추가하여 실행해 보면 에러가 뜬다.

 

위의 코드를 {{persion.name}}, {{person.age}}로 수정해 주어야 한다.

🔍 Vue 메서드

뷰 메서드는 특정 기능별로 묶을 수 있는 자바스크립트 함수를 의미한다. 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.

 

간단한 함수 nextYear를 추가하고 실행해 보면

잘 출력된다.

이번에는 매개변수를 넣어서 실행해본다.

함수를 사용할 때 넣어주는 값을 (안녕하세요!) 인자라고 하며,

함수 안에서 설정된 변수(greething)을 매개변수라고 한다.