Vue.js는 어떻게 사용할까

CDN 방식

프로토 타이핑 또는 학습 목적일 경우

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

프로덕션 환경인 경우 새 버젼에서 오류를 방지하려면 빌드 파일을 추가

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

기본 ES모듈을 사용하는 경우

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

NPM 방식

Vue를 사용하여 대규모 앱을 구축할땐 NPM을 이용한 설치를 권장!

# 최신 안정화 버젼
$ npm install vue

npm은 webpack / Browserify 같은 모듈 번들러와 잘 작동한다

선언적 렌더링

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링할수있는 시스템이 있다.

<div id='app'>
	{{ message }}
</div>

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

Hello Vue

조건적 렌더링

엘리먼트가 표시되는지에 대한 여부를 제어하는건 존나 간단하다
v-if의 값이 true면 됨!!

<div id='app_if'>
	<p v-if="seen">너 내가 보여?</p>
</div>

var app = new Vue({
	el: '#app_if',
    data: {
    	seen: true
    }
})

너 내가 보여?