GOAL

Vue.js 요약정리

---

Vue.js

; 프론트 프레임워크.

라이프사이클

SCRIPT

<!--최신버전-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--특정버전 : vue @ 버전-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

• vue/dist/vue.js
  ; vue 디렉토리에 배포폴더 안에 있는 vue.js

디렉티브

• v-text
  ; 텍스트 그대로를 표시.
• v-html
  ; html 태그를 사용할수 있도록 함.
• v-bind
  ; 자주 쓰는 디렉티브. 생략가능
  • :src= 이미지
  • :href= 링크
  • :aling= 정렬
  • :style= 인라인스타일지정
    • "{color:~}" color지정
    • "{fontSize:~}" font-size지정
    • "backgroudColor:~" background-color
• v-model
  ; 입력값과 데이터 연결
  • 대표예) 동의에 체크하면 송신 버튼이 활성화 되도록 하는 기능

	<div id="app">
			<label><input type="checkbox" v-model="myAgree" >
			동의합니다.</label>
			<button v-bind:disabled="myAgree==false">송신</button>
		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
					myAgree: false
				}
			})
		</script>

• html , css 는 케밥표기법. (-하이픈으로 연결. 모두 소문자.)
• js 는 카멜표기법. (복수단어 연결 시 두번째 이후 단어 시작은 대문자.)
• js class명 등은 파스칼표기법. (단어 시작시 대문자.)
• 인라인스타일은 css 그대로 사용하기 때문에 케밥 / v-bind는js를 사용하므로 카멜._

ing,,,

---

ref

• 백견불여일타 Vue.js 입문 ; 도서
• vue.js 공식문서