Vue
ㅇ Vue?
- MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
ㅇ Reactivity (반응성)
- Vue.js가 가지는 특징 중 하나
...
<div id=“app”></div>
...
<script>
var div = document.querySelector(‘#app’);
var viewModel = {};
(function() { //즉시실행 함수
function init() {
Object.defineProperty(viewModel, ‘str’, {
get : function() {
console.log(‘접근’);
},
set : function(newValue) {
console.log(‘할당’, newValue);
render(newValue);
},
});
}
function render(value) {
div.innerHTML = value;
}
})();
</script>※ 즉시실행 함수
https://developer.mozilla.org/ko/docs/Glossary/IIFE
IIFE - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
**즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)**은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.
developer.mozilla.org
컴포넌트(Components)
ㅇ 전역 컴포넌트 (plug-in, library 등…)
Vue.component(‘app-header’ {template: ‘<h1>Header<h1>’});
ㅇ 지역 컴포넌트 (일반)
new Vue({
…
components : {
‘app-header’ : {
template : ‘<h1>Header</h1>’;
}
}
…
});
ㅇ 컴포넌트 통신 규칙
- 상위에서 하위로는 데이터를 내려줌, 프롭스 속성
- 하위에서 상위로는 이벤트를 올려줌, 이벤트 발생
- 컴포넌트 통신 규칙이 없다면, 특정 액션이 생겼을 때 생기는 버그 추적이 어려움 (반대로, 컴포넌트 통신 규칙이 있음으로 데이터 흐름 추적이 용이)
Props | Cracking Vue.js
props 속성 프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법입니다. 프롭스 속성을 기억할 때는 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성으로 기억
joshua1988.github.io
Event Emit | Cracking Vue.js
이벤트 발생 이벤트 발생은 컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식입니다. 이벤트 발생 코드 형식 하위 컴포넌트의 메서드나 라이프 사이클 훅과 같은 곳
joshua1988.github.io
ㅇ Props (데이터 전달)
<!--<app-header v-bind:프롭스 속성 이름=“상위 컴포넌트의 데이터 이름”> </app-header>-->
<app-header v-bind:propsdata=“message”></app-header>
<script>
var appHeader = {
template : ‘<h1>header</h1>’,
props: [‘propsdata’]
}
new Vue({
…
components : {
‘app-header’ : appHeader,
},
data : {
message : ‘hello’,
}
…
})
</script>
ㅇ Emit (이벤트 발생)
<!--<app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름=“상위 컴포넌트의 메서드 이름”></app-header>-->
<app-header v-on:pass=“logText”></app-header>
<script>
var appHeader = {
template : ‘<button v-on:click=“passEvent”>click me</button>’,
methods: {
passEvent : function() {
this.$emit(‘pass’);
}
}
}
new Vue({
…
components : {
‘app-header’ : appHeader,
},
methods: {
logText : function() {
console.log(‘hello’);
}
}
…
})
</script>
ㅇ 같은 레벨에서의 컴포넌트 통신
