#4. Vue 싱글 파일 컴포넌트, Vue CLI

 

 

.vue 파일은 싱글파일 컴포넌트로서 html, javaScript, css를 하나의 파일에서 관리한다. 

기본 구조는 template, script, style로 구성된다. 

<template>
    <!-- html 영역 -->
    <div>header</div>
</template>

<script>
export default {
    // javaScript 영역 - 컴포넌트의 인스턴스 옵션을 이 영역에 넣음
    method:{
        addNum:function(){

        }
    }
}
</script>

<style>
    /* css 영역 */
</style>

 

이 기본 구조는 vue 입력 + tab으로 자동 완성할 수 있다.

 

 

Vue CLI

<script>
export default {
  data: function(){
    return {
      str:'hi'
    }
  }
}
</script>

//위 스크립트와 아래는 같은 내용이나 CLI로 인해 문법이 다름

<script>
new Vue({
	data: {
    	str: 'hi'
    }
})	
</script>

 

 

vue 공부 시 보면 좋을 공식 문서

(한글 번역 시 원문 훼손의 가능성이 있기때문에 가능하면 원문 그대로 보는 것을 추천)

 

https://vuejs.org/guide/introduction.html

Introduction | Vue.js

 

https://v2.vuejs.org/v2/style-guide/?redirect=true  - 스타일 가이드 : 올바른 코드 작성법

Style Guide — Vue.js

 

https://v2.vuejs.org/v2/cookbook/?redirect=true  - 쿡북 : 실용적인 문법이나 문제 등

Introduction — Vue.js

 

https://v3.vuex.vuejs.org/

What is Vuex? | Vuex

 

https://v3.router.vuejs.org/

Vue Router

 

https://cli.vuejs.org/

Vue CLI