Vue.js 시작하기 - 인스턴스
뷰 인스턴스
뷰 인스턴스는 뷰를 사용하려면 꼭 필요한 코드이다.
주로 변수를 선언해서 변수에 담아 사용한다.
뷰 인스턴스 생성 후에 콘솔 로그를 사용하면 인스턴스 안에 어떤 속성과 api(기능)를 가지고 있는지 확인할 수 있다.
뷰 인스턴스 생성
변수를 선언하고 Vue 객체를 생성해 변수에 인스턴스를 담는다.
el은 타겟 element를 의미하며, 인스턴스를 생성하고 el에 타겟 element를 지정해주지 않으면 인스턴스에 추가한 속성이나 기능을 사용할 수 없다.
//vm 변수에 Vue 객체 생성
var vm = new Vue({
el : '#app',
data: {
message : 'hi'
}
});
자바스크립트 생성자 함수로 보는 뷰 인스턴스 생성 이유
생성자 함수를 통하면 함수를 이용해서 어떤 정보를 담은 객체를 생성할 수 있다.
//생성자 함수의 객체 생성 패턴
//함수 명 첫번째 대문자 -> 암묵적으로 생성자 함수임을 의미한다.
function Person (name, job){
this.name = name;
this.job = job;
}
변수에 생성자를 담아 객체를 생성할 수 있다.
var p = new Person('josh','developer');
p를 콘솔에 찍었을 때
new Vue()를 사용하는 이유
생성자 함수에 미리 함수를 정의해두면 함수의 내용을 매번 만들 필요가 없고,
생성자 함수를 호출하면서 생성자 함수 안의 미리 정의된 함수를 가져다 사용할 수 있다.
new Vue()를 콘솔에 찍었을 때
Vue 함수 안에 미리 정의된 속성과 api(기능)을 확인할 수 있다.
뷰 인스턴스 옵션 속성
뷰 인스턴스에는 여러가지 옵션(속성)이 있다.
Vue()안에 객체리터럴의 형태로 속성을 추가하여 사용한다.
따로 객체리터럴을 담은 변수를 선언하여 Vue 안에 넣어 사용해도 된다.
//var options = {}
//Vue()안에 객체리터럴의 형태로 속성을 추가한다.
var vm = new Vue({
el : '#app',
data: {
message : 'hi'
},
methods : {
}
});
Author And Source
이 문제에 관하여(Vue.js 시작하기 - 인스턴스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jcrs0907/vue-start-04저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)