Vue 기본 문법

Basic syntax of Vue.js

 

Vue instance

실제로 쓸수 있는 존재 - 설계도를 바탕으로 실제로 쓸 수 있는 존재를 만든다고 생각

모든 Vue 앱은 Vue 함수로 새 인스턴스를 만드는 것 부터 시작

Vue 인스턴스를 생성할 대는 Options 객체를 전달해야 함

• 여러 Options들을 사용하여 원하는 동작을 구현

Vue Instance === Vue Component

const app = new Vue({

})

 

Options/DOM

'el'

Vue 인스턴스에 연결(마운트) 할 기존 DOM 엘리먼트가 필요

CSS 선택자 문자열 혹은 HTMLElement로 작성

new를 이용한 인스턴스 생성때만 사용

const app = new Vue({
    el: '#app'
})

'data'

Vue 인스턴스의 데이터 객체

Vue 앱의 상태 데이터를 정의하는 곳

Vue template에서 interpolation을 통해 접근 간으

v-bind, v-on과 같은 디렉티브에서도 사용 가능

Vue 객체 내 다른 함수에서 this 키워드를 통해 접근 가능

주의

• 화살표 함수를 'data'에서 사용하면 안됨
• 화살표 함수가 부모 컨텍스트를 바인딩하기 때문에, 'this'는 예상과 달리 Vue 인스턴스를 가리키지 않음

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello',
    }
})

'methods'

Vue 인스턴스에 추가할 메서드

Vue template에서 interpolation을 통해 접근 가능

v-on과 같은 디렉티브에서도 사용 가능

Vue 객체 내 다른 함수에서 this 키워드를 통해 접근 가능

주의

• 화살표 함수를 메서드를 정의하는데 사용하면 안됨
• 화살표 함수가 부모 컨텍스트를 바인딩하기 때문에, 'this'는 Vue 인스턴스가 아니며 'this.a'는 정이되지 않음

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello',
    },
    methods: {
        greeting: function () {
            console.log('hello')
        }
    }
})

 

this keyword in vue.js

Vue 함수 객체 내에서 vue 인스턴스를 가리킴

단, JS함수에서는 this 키워드는 다른 언어와 조금 다르게 동작하는 경우가 있음

화살표 함수를 사용하면 안되는 경우

1. data
2. method정의