VueJS day2

뷰 인스턴스 | 데이터 | 메소드

뷰 인스턴스

뷰 기능을 사용하기 위해서 뷰 인스턴스 객체를 생성해줘야한다. 뷰 인스턴스의 형태로는 아래와 같다.

타입 변수명 = new Vue({
	el: '요소명',
	data: {
		key:value,
		...
	},
	methods:{
		...
	},
	...
})

데이터

뷰 데이터는 뷰 인스턴스 내부에 data 객체를 의미하여 데이터의 정보를 웹 문서에 전달하여 렌더링할 수 있다.

<div id="app">
    님의 나이는 세 입니다.
</div>

var app = new Vue({
    el: '#app',
    data: {
        name : '홍길동',
        age : 40
    }
})

위 코드를 보면 data 만에 name, age를 지정하여 그 값들을 html 문서에 렌더링하여 출력 가능하다.

메소드

메소드는 뷰 인스턴스 내부 methods 안에서 선언해주었다가 html이나 script 내에서 호출시 실행되는 함수의 역할을 한다.

<div id="app">
    <br>
    <a :href="getCoderLink('https://dict.')">네이버</a>
</div>

var app = new Vue({
    el:'#app',
    data: {
        person:{
            name: '홍길동',
            age: 40
        },
        link:'naver.com'
    },
    methods: {
        nextYear: function(greeting){
            return `${greeting}! ${this.person.name}는 내년에${(this.person.age + 1)}세 입니다`;
        },
        getCoderLink(channel){
            return channel + this.link;
        }
    }
})

nextYear 메소드는 html에서 매개변수를 받아 호출한 형태로 리턴 시 리턴 값을 html문서에 반환해준다. this가 의미하는 것은 현재 인스턴스를 의미한다.