개념 돌아보기
1. Vue instance 만들기
모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다.
엄격히 MVVM 패턴과 관련이 없지만 Vue의 디자인은 부분적으로 그것에 영감을 받았습니다.
모델-뷰-뷰 모델(model-view-viewmodel, MVVM)은 하나의 소프트웨어 아키텍처 패턴으로-마크업 언어 또는 GUI 코드로 구현하는-그래픽 사용자 인터페이스(뷰)의 개발을 비즈니스 로직 또는 백-엔드 로직(모델)로부터 분리시켜서 뷰가 어느 특정한 모델 플랫폼에 종속되지 않도록 해준다.
-위키백과-
관례적으로, Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용합니다.
Vue 인스턴스를 생성할 때는 options 객체를 전달해야 합니다. 전체 옵션 목록은 API reference에서 확인할 수 있습니다.
Option
- data: Object/Function, Vue 인스턴스의 데이터 객체
- props: Array\/Object, 부모 컴포넌트 데이터 메타
- propsData: {[key:string]:any}, 인스턴스 생성하는 동안 속성 전달
- computed: {[key:stirng]:Fuction}, Vue인스턴스의 계산된 속성
- methods: {[key:stirng]:Fuction}, Vue 인스턴스의 method
- watch: {[key:stirng]:string/Fuction/Object/Array}, 키가 표시되는 표현식이고 값이 콜백
2. 데이터와 메서드
2-1 data객체에 있는 모든 속성=>반응형시스템에 추가
Vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가됩니다. 각 속성값이 변경될 때 뷰가 “반응”하여 새로운 값과 일치하도록 업데이트됩니다.
데이터가 변경되면 화면은 다시 렌더링됩니다. ⭐유념할 점은, data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이라는 것입니다.
보통 Vue component 파일 내에서 아래와 같이 data를 선언하고 초기화 합니다.
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}기존 속성이 변경되는 것을 막아 반응성 시스템이 추적할 수 없도록 Object.freeze ()를 사용할 수 있습니다. 값이 변경되지 않음을 의미합니다.
<template>
<div>
<h3>{{ test.a }}</h3>
<button @click="test.a = '2'">
test버튼
</button>
<h3>{{ testConst.foo }}</h3>
<button @click="testConst.foo = '2'">
testConst버튼
</button>
</div>
</template><script>
let test = {
a:1
}
let testConst = {
foo: 'bar'
}
Object.freeze(testConst)
export default {
data() {
return {
message: 'Hello vue world!',
test: test,
testConst:testConst
}
}
}
</script>
2-2 $접두어
Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공합니다. 다른 사용자 정의 속성과 구분하기 위해 $ 접두어를 붙였습니다.
3. 인스턴스 라이프사이클
각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 관찰 설정이 필요한 경우(Watch), 템플릿을 컴파일하는 경우, 인스턴스를 DOM에 마운트하는 경우(mount), 그리고 데이터가 변경되어 DOM를 업데이트하는 경우(updated)가 있습니다. 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅 도 호출됩니다.
인스턴스 라이프사이클의 여러 단계에서 호출될 다른 훅도 있습니다. 그 예로 mounted,updated 및 destroyed가 있습니다. 모든 라이프사이클 훅은 this 컨텍스트가 호출하는 Vue 인스턴스를 가리키며 호출됩니다.
Vue 세계에서 “컨트롤러”의 컨셉이 어디에 있는지 궁금할 수 있습니다. 답은 컨트롤러가 없습니다. 컴포넌트의 사용자 지정 로직은 이러한 라이프사이클 훅으로 분할됩니다.
3-1 예제
<script>
export default {
data() {
return {
message: '안녕하세요 vue world'
}
},
created() {
console.log('created')
console.log(this.message)
},
mounted() {
console.log('mounted')
console.log(this.message)
},
destroyed() {
console.log('destroyed')
console.log(this.message)
},
}
</script>
created 후 mounted가 실행되는 것을 확인할 수 있습니다.
주의사항
options 속성이나 콜백에 created: () => console.log(this.a) 이나 vm.$watch('a', newValue => this.myMethod()) 와 같은 화살표 함수 사용을 지양하기 바랍니다. 화살표 함수는 this를 가지지 않기 때문에 화살표 함수에서의 this는 다른 변수로 취급되거나 렉시컬하게 호출한 변수를 발견할 때까지 부모 스코프에서 해당 변수를 찾습니다. 이 때문에 Uncaught TypeError: Cannot read property of undefined 또는 Uncaught TypeError: this.myMethod is not a function와 같은 오류가 발생하게 됩니다.
//화살표 함수로 구현한 경우
created: () =>{
console.log('created')
console.log(this.message)
},
인스턴스 라이프사이클 다이어그램
주로 created, mounted, destroyed, beforeDestory가 사용이 됩니다.
4. 템플릿 문법
Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석 할 수있는 유효한 HTML입니다.
내부적으로 Vue는 템플릿을 ⭐가상 DOM 렌더링 함수로 컴파일 합니다. 반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있습니다.
예를 들어 버튼을 누르면 수백개의 텍스트가 일정 간격으로 변경된다고 가정을 해보도록 하겠습니다.
기존 자바스크립트에서는 document.getElemntById등 클래스, 아이디, 태그를 가져와 하나씩 업데이트를 해야하지만 가상돔을 사용해 변경시켜야하는 목록을 가지고 있다가 3개를 한꺼번에 싹 변경을 시킨다던지?등으로 브라우저에 무리가 가지 않도록 vue.js만의 가상돔 렌더링함수를 사용하고 있습니다.
가상 DOM 개념에 익숙하고 JavaScript의 기본 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성할 수 있으며 선택사항으로 JSX를 지원합니다.
4-1 보간법 - 값대입
1) 텍스트보간법
데이터 바인딩의 가장 기본 형태는 “Mustache” 구문(이중 중괄호)을 사용한 텍스트 보간입니다.
- HTML태그 사이 {{}}
- HTML태그에 값을 설정하는 경우
v-bind를 사용합니다.
<p>{{ courseGoal }}<p>
<p>Lear more <a v-bind:href="vueLink">about Vue</p>data(){
return {
coursGoal: 'Finish the course and learn Vue!',
vueLink: 'https//vuejs.org/'
}
}Mustache 태그는 해당 데이터 객체의 courseGoal 속성 값으로 대체됩니다. 또한 데이터 객체의 courseGoal 속성이 변경될 때 마다 갱신됩니다.
v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다.
<span v-once>다시는 변경하지 않습니다: {{ msg }}</span><template>
<div class="hello">
<h2>{{ message }}</h2>
<h2 v-once>
{{ message }}
</h2>
</div>
<button @click="message = 'Hello Fast Campus School'">
버튼
</button>
</template><script>
export default {
data() {
return {
message: '안녕하세요 vue world'
}
}
}
</script>
버튼을 눌러도 v-once디렉티브가 부여된 부분은 변경되지 않는 것을 확인할 수 있습니다
2) 원시 HTML
이중 중괄호(mustaches)는 HTML이 아닌 일반 텍스트로 데이터를 해석합니다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 합니다.
<template>
<div class="hello">
<h2>{{ message }}</h2>
<h2 v-once>
{{ message }}
</h2>
</div>
<div>{{ rawHtml }}</div>
<div v-html="rawHtml"></div>
</template><script>
export default {
data() {
return {
message: '안녕하세요 vue world',
rawHtml: '<button>button</button>'
}
}
}
</script>
3) 속성(Atrribute)
Mustaches는 HTML 속성에서 사용할 수 없습니다. 대신 v-bind 디렉티브를 사용하세요:)
<div v-bind:id="dynamicId"></div>boolean 속성을 사용할 때 단순히 true인 경우 v-bind는 조금 다르게 작동합니다.
<button v-bind:disabled="isButtonDisabled">Button</button>isButtonDisabled가 null, undefined 또는false의 값을 가지면 disabled 속성은 렌더링 된<button>엘리먼트에 포함되지 않습니다.
<template>
<div class="hello">
<h2>{{ message }}</h2>
<h2 v-once>
{{ message }}
</h2>
<button>버튼1</button>
<button :disabled="idDisabled">
버튼2
</button>
</div>
</template><script>
export default {
data() {
return {
message: '안녕하세요 vue world',
rawHtml: '<button>button</button>',
idDisabled: true
}
}
}
</script>
4) JavaScript 표현식 사용
지금까지 템플릿의 간단한 속성 키에만 바인딩했습니다. 그러나 실제로 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다.
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}