| OS | Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) |
| Vue | 2.5.13 |
# 온라인 에디터
PlayCode - Code Sandbox. Online Code Editor
playcode.io
# 공식홈
시작하기 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
# Vue API reference
API — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
[콘솔]
[라이프 사이클 다이어그램]
# 라이프 사이클
[시작전 코드 보기]
[코드]
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div id="app">
<p>DOM (Document) </p>
<message-list :items="messageList" @info="testMethod"></message-list>
{{ newMessage }}
<p v-custom="bindingValue"></p>
</div>
|
cs |
main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
Vue.component('MessageList', {
props: ['items'],
template: `
<div>
<ul>
<li v-for="item in items">
{{item.content}}
</li>
</ul>
<button @click="componentMethod()">컴포넌트 버튼</button>
</div>`,
methods: {
componentMethod() {
this.$emit('info')
}
}
});
Vue.directive('custom', {
bind: function(el, binding) {
el.innerText = binding.value
}
})
var vm = new Vue({
el: '#app',
data() {
return {
messageList: [
{ id: 1, content: '메시지 1' },
{ id: 2, content: '메시지 2' }
],
newMessage: '새 메시지',
bindingValue: '사용자 디렉티브'
}
},
methods: {
testMethod() {
alert('테스트 메소드')
}
},
components: {
/* MessageList */
},
directives: {
/*
custom: {
bind: function(el, binding) {
el.innerText = binding.value
}
}
*/
}
})
|
cs |
라이프 사이클을 처음보는 경우는 이해가 안되실 수 있으니 스킵 후 아래 용어가 사용 될 때 다시 보시면
이해하시는데 어려움 없으실 겁니다.
| 라이프 사이클 | 설명 |
| beforeCreate | Vue 인스턴스가 초기화 된 직 후에 발생 컴포넌가 DOM에 추가되기전 이어서 this.$el 접근 불가 data, event, watcher 에도 접근하기 전 이라 data, methods 에 접근 불가 |
| created | data를 반응형으로 추적 가능 computed, methods, watch 등 접근 가능 아직 까지는 DOM 에 추가되지 않은 상태 data 에 직접 접근이 가능하기 때문에, 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅해야 하거나 이벤트 리스너를 선언해야 할 때 적절한 단계이다 |
| beforeMount | DOM 에 부착하기 직전에 호출되는 훅 함수 이 단계 전에서 템플릿 있는 지 없는 지 확인한 후 템플릿을 렌더링 한 상태이므로, 가상 DOM 이 생성되어 있으나 실제 DOM에 부착되지는 않은 상태 |
| mounted | 가장 많이 사용되는 훅 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로 this.$el을 비롯한 data, computed ,methods, watch 등 모든 요소에 접근이 가능 일반적인 경우 부모와 자식 컴포넌트 간의 mounted 훅 순서는 자식 다음에 부모를 mounted 한다 자식컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우 부모는 자식의 mounted 를 기다리지 않는다. 따라서 이 때는 this.$nextTick 을 이용하여 모든 화면이 렌더링 된 이후에 실행되는 메소드를 사용해야 한다 |
| beforeUpdate | 컴포넌트에서 사용되는 data의 값이 변해서, DOM 에도 그 변화를 적용시켜야 할 때가 있다. 이 때, 변화 직전에 호출되는 것이 바로 beforeUpdate 훅 이다. 변할 값을 이용해 가상 DOM을 렌더링하기 전이지만, 이 값을 이용해 작업 할 수 있다. 이 훅에서 값들을 추가적으로 변화 시키더라도 렌더링을 추가로 호출하지 않는다 |
| updated | 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후 호출되는 updated 훅 변경된 data가 DOM에도 적용된 상태이다. 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면, updated 훅이 가장 적절하다 다만 이 훅에서 data를 변경하는 것은 무한 루프를 일으킬 수 있으므로 이 훅에서 데이터를 직접 바꿔서는 안된다. mounted 훅과 마찬가지로, this.$nextTick 메소드를 사용해야 한다 |
| beforeDestroy | 해당 컴포넌트 인스턴스가 해체되기 직전에 beforeDestroy 훅이 호출 아직 해체되기 이전이므로, 인스턴스는 완전하게 작동하기 때문에 모든 속성에 접근 가능 주로 이 단계에서는 이벤트 리스너를 해체하는 등 인스턴스가 사라지기 전에 해야할 일 들을 처리한다 |
| destroyed | 컴포넌트 인스턴스가 해체되고 난 직후에 destroyed 훅 호출 해체가 끝난 이후이기 때문에 인스턴스의 속성에 접근 불가 또한 하위 Vue 인스턴스 역시 삭제 된다 (하위 Vue 인스턴스 = 컴포넌트) |
[코드]
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<div id="app">
<p>
<Child v-if="!isDelete" ></Child>
</p>
<p>
{{ val }}
</p>
<p>
<button @click="change()">부모 update</button>
</p>
<p>
<button @click="destroye()">자식(컴포넌트) 연결 끊기</button>
</p>
</div>
|
cs |
main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
const Child = {
template: '<div>Child</div>',
beforeCreate () {
console.log(`[Child - beforeCreate] ${this.$el}`)
},
created () {
console.log(`[Child - created] ${this.$el}`)
},
beforeMount () {
console.log(`[Child - beforeMount] ${this.$el}`)
},
mounted () {
console.log(`[Child - mounted] ${this.$el}`)
},
beforeUpdate () {
console.log(`[Child - beforeUpdate] ${this.$el}`)
},
updated () {
console.log(`[Child - updated] ${this.$el}`)
},
beforeDestroy () {
console.log(`[Child - beforeDestroy] ${this.$el}`)
},
destroyed () {
console.log(`[Child - destroyed] ${this.$el}`)
}
}
var vm = new Vue({
el: '#app',
data() {
return {
val: 'AAA',
isDelete: false
}
},
methods: {
change() {
console.log('--------[업데이트]---------')
this.val = 'BBB'
},
destroye() {
console.log('--------[연결 끊기]---------')
this.isDelete= true
}
},
beforeCreate () {
console.log(`[Parent - beforeCreate] ${this.$el}`)
},
created () {
console.log(`[Parent - created] ${this.$el}`)
},
beforeMount () {
console.log(`[Parent - beforeMount] ${this.$el}`)
},
mounted () {
console.log(`[Parent - mounted] ${this.$el}`)
},
beforeUpdate () {
console.log(`[Parent - beforeUpdate] ${this.$el}`)
},
updated () {
console.log(`[Parent - updated] ${this.$el}`)
},
components: {
Child
}
})
|
cs |
[결과]
참고한 사이트
Vue 라이프사이클 이해하기 - 재그지그의 개발 블로그
Vue 인스턴스의 상태가 변화함에 따라, 각 상태가 어떤 특징을 가지고 있는지 알아봅니다.
wormwlrm.github.io
# 선언적 렌더링
[코드]
[설명]
[결과]
# 보간법 (interpolation)
문자열
일회성 보간법 v-once
# HTML 속성 적용
<선택 1> <tag v-html="[프로퍼티명]"></tag>
<선택 2> <tag v-html="[프로퍼티명]" />
# 자바스크립트 표현식
연산, 삼항연산, 메소드, 문자열 합치기
# 디렉티브
v- 로 시작하는 지시자들 (v-if, v-on...)
단, v-for 는 예외
v- 지시자들은 단일 자바스크립트 표현식이 가능
v-if="[true 또는 false]"
<전달인자> v-on:[이벤트]="[메소드명]"
v-on 대신 @ 로 대체 가능
<동적 전달인자> 2.6.0+ 에서 추가됨
v-bind:[[프로퍼티명]]="[프로퍼티명]"
v-on:[[프로퍼티명]]="[메소드명]"
수식어
v-on:[이벤트].[수식어]="[메소드명]"
예시1 v-on:submit.prevent="alert('A')"
event.preventDefault() 호출 후 메소드 호출
예시2 v-on:keyup.enter="alert('A')"
keyup 중 엔터키일 때만 메소드 호출
# 속성 바인딩 (attribute binding)
<선택 1> v-bind:[속성명]="[프로퍼티명]"
<선택 2> :[속성명]="[프로퍼티명]"
[코드]
[설명]
[결과]
# computed & watch
[선언적 프로그래밍 방식] computed = 반응형 getter
getter 이기 때문에 메소드와 달리 ()를 안붙여도 된다.
기본적으로 getter만 갖고있지만, setter도 만들수 있다 (공식홈 참고 바람)
더 자세한 정보 공식홈 에서 꼭 참고 바람
computed와 watch — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
[명령적 프로그래밍 방식] watch = 반응형 callBack
watch 방식은 fullName 이라는 프로퍼티도 만들어야 하고
firstName 과 lastName이 변경될 때 감지를 하여 callBack 으로 fullName 값을 변경하는 방식이다.
아래는 위 예시와 같은 computed 방식은 훨신 더 간단하다
비동기 또는 시간이 걸리는 작업을 할 때 사용함 (=ajax)
+추가
data: { return { name: 'martin' }}
watch () {
martin(val, oldVal) {
logic...
}
}
// data 의 name 이 변경될 때 watch 의 logic 이 실행된다
+주의
지금은 redo 를 직접적으로 바뀐거지만, 간접적으로 다른곳에서 변경되는 코드가 watch 안에 있다면, 같은 현상이다
watch 는 비동기로 처리 된다
때문에 대부분의 사람들이 watch 를 왠만하면 쓰지 말라고 하며, watch 없이 다른 방법으로 구현하는 것을 추천한다
아래 공식 홈 예제 참고바람
computed와 watch — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
# 클래스와 스타일 바인딩
<선택 1> v-bind:style="[프로퍼티명]"
<선택 2> :style="[프로퍼티명]"
<선택 1> v-bind:class="[프로퍼티명]"
<선택 2> :class="[프로퍼티명]"
# 조건문 & 반복문
<조건문> v-if="[프로퍼티명:Boolean]"
true = 화면에 표시함
false = 화면에 표시 안함
[코드]
[설명]
[결과]
<조건문> v-else-if 와 v-else
v-else-if="[프로퍼티명:Boolean]"
v-else
v-else-if 는 2.1.0+부터 새롭게 추가됨
[결과]
[if 문에서의 key] - 꼭 참고
조건부 렌더링 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
Template 태그에서도 사용가능
[코드]
[결과]
v-show="[프로퍼티명:Boolean]"
v-if 와 사용방법은 같지만 v-show는 CSS 의 display:none 속성을 이용하는 방법이다.
v-if 는 해당 태그가 존재하지 않지만, v-show 존재하지만 화면에만 숨겨져있을 뿐이다.
자주 생산비용(해당 작업에 대한 지연시간)에 따라 적절한 것을 사용하면 된다.
| 초기 생산 비용 | 런타임 도중 생산 비용 |
| v-if < v-show | v-if > v-show |
[공식 문서 참고 바람]
조건부 렌더링 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
<반복문> v-for="[로컬변수명] in [프로퍼티]"
value Array
로컬변수는 해당 태그 안에서만 사용이 가능하고 외부에서는 사용할 수 없다. (변수명은 직접지정)
[코드]
[설명]
[결과]
<반복문-인덱스> v-for="([로컬변수명], [로컬변수명]) in [프로퍼티]"
value index Array
<반복문-of> v-for="[로컬변수명] of [프로퍼티]"
value Array
<반복문-객체> v-for="[로컬변수명] of [프로퍼티]"
value Object
<반복문-객체> v-for="([로컬변수명], [로컬변수명]) of [프로퍼티]"
value key Object
<반복문-객체> v-for="([로컬변수명], [로컬변수명], [로컬변수명]) of [프로퍼티]"
value key index Object
Maintaining State
[공식홈 참고 바람]
리스트 렌더링 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
[ 자바스크립트 Array Refernce]
JavaScript Array Reference
JavaScript Array Reference Array Object The Array object is used to store multiple values in a single variable: Array indexes are zero-based: The first element in the array is 0, the second is 1, and so on. For a tutorial about Arrays, read our JavaScript
www.w3schools.com
배열 변경 감지
배열 변경 감지는 원본 배열이 수정된다.
| 메소드 | 설명 | GIF |
| push() | 배열 마지막에 항목 추가 1개 또는 여러개 배열 추가 가능 <-> pop |
 |
| unshift() | 배열 처음에 항목을 추가 1개 또는 여러개 배열 추가 가능 <-> shift |
 |
| pop() | 배열 마지막 항목을 제거 1개의 배열만 제거 <-> push |
 |
| shift() | 배열 처음에 항목을 제거 1개의 배열만 제거 <-> unshift |
 |
| splice(start, end) | start 부터 end 까지 자르기 자른 후 배열 추가도 가능하다 (start, end, 'A', 'B'...) |
 |
| sort() | 배열 오름차순 정렬 [내림차순, 가장 높은 값 등 더 많은 정보] https://www.w3schools.com/jsref/jsref_sort.asp |
 |
| reverse() | 배열 역배치 |  |
코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<div id="app">
<ul>
<li>
<button @click="push()">PUSH</button>
<button @click="pop()">POP</button>
<button @click="shift()">SHIFT</button>
<button @click="unshift()">UNSHIFT</button>
<button @click="splice()">SPLICE</button>
<button @click="sort()">SORT</button>
<button @click="reverse()">REVERSE</button>
</li>
<li v-for="animal in animals">
{{animal}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
animals: ['사자', '호랑이', '개', '원숭이', '고양이', '쥐']
}
},
methods: {
push() {
console.log('[변경 전]', this.animals)
this.animals.push('고릴라', '치타')
console.log('[변경 후]', this.animals)
},
pop() {
console.log('[변경 전]', this.animals)
this.animals.pop()
console.log('[변경 후]', this.animals)
},
shift() {
console.log('[변경 전]', this.animals)
this.animals.shift()
console.log('[변경 후]', this.animals)
},
unshift() {
console.log('[변경 전]', this.animals)
this.animals.unshift('너구리', '코알라')
console.log('[변경 후]', this.animals)
},
splice() {
console.log('[변경 전]', this.animals)
this.animals.splice(1, 3)
console.log('[변경 후]', this.animals)
},
sort() {
console.log('[변경 전]', this.animals)
this.animals.sort()
console.log('[변경 후]', this.animals)
},
reverse() {
console.log('[변경 전]', this.animals)
this.animals.reverse()
console.log('[변경 후]', this.animals)
}
}
})
</script>
|
cs |
배열 대체
| 메소드 | 설명 | GIF |
| filter | ||
| concat | ||
| slice |
[공식 홈페이지 꼭 참고 바람]
리스트 렌더링 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
# 이벤트 핸들링
<선택 1> v-on:[이벤트]="[메소드]"
<선택 2> @[이벤트]="[메소드]"
[코드]
[설명]
[결과]
# 양방향 바인딩
v-model="[프로퍼티명]"
[코드]
[설명]
[결과]
# 컴포넌트 - Vue.component()
[방법 - 전역]
Vue.component('[커스텀태그명]' ,{
props: ['[커스텀태그명에 작성된 속성명]'],
template: '<li>{{ [커스텀태그명에 작성된 속성명] }}</li>'
});
여기서 template 프로퍼티는 <template><li>....</li></template> 와 같다
new Vue({...}) 자체도 하나의 컴포넌트이다.
new Vue({...}) 안 속의 컴포넌트를 작성했을 경우 해당 컴포넌트는 자식 컴포넌트라고 말한다
[코드]
[설명]
| 유의사항 | GIF (이미지 클릭) |
| 태그를 닫을 때 <tag></tag> 로 닫아야 한다. |  |
| 속성명 '_' 사용 가능 |  |
| 속성명 '-' 사용 불가능 |  |
| 속성명 '대문자' 사용 불가능 |  |
| 태그 안속에 새로운 태그 작성 가능 |  |
| 태그 밖에 새로운 태그 작성 불가능 |
 |
| 기타 (코드는 아래에 있는 '더보기' 클릭) |
 |
'기타' 코드
index.html
|
1
2
3
4
5
6
7
8
9
10
|
<div id="app">
<!-- [기본] -->
<message-list :items="newMessage"></message-list>
<!-- [v-for] -->
<!-- <message-list :items="messageList"></message-list> -->
</div>
|
cs |
main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
Vue.component('MessageList', {
props: ['items'],
/** [기본] */
/* 태그가 없는 경우 기본 출력 불가능 */
// template: '메시지 입니다',
// template: '<p>메시지 입니다</p>',
/* 태그가 없는 경우 props 출력 불가능 */
// template: '{{items}}',
// template: '<p>{{items}}</p>',
/** [v-if] */
// template: '<p v-if="true">{{items}}</p>',
/** [v-for] */
/* v-for 는 template에서 감싸는 태그가 없는 경우 출력 불가 */
// template: '<p v-for="item in [1,2,3,4]"> {{item}} </p>',
// template: '<div><p v-for="item in [1,2,3,4]"> {{item}} </p><div>',
/* v-for 는 template에서 감싸는 태그가 없는 경우 출력 불가 */
// template: '<li v-for="item in itmes"> {{item}} </li>',
// template: '<ul><li v-for="item in items"> {{item}} </li></ul>'
});
var vm = new Vue({
el: '#app',
data() {
return {
messageList: [
{ id: 1, content: '메시지 1' },
{ id: 2, content: '메시지 2' }
],
newMessage: '새 메시지'
}
}
})
|
cs |
[결과]
[기타 예제]
name과 price 속성 앞에 콜론을 붙이지 않은 이유는 JS 프로퍼티명을 바인딩하지 않고 있기 때문입니다.
[key 를 사용하는 이유]
리스트 렌더링 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
# 컴포넌트 - module
[방법 - 로컬]
components: {
[컴포넌트명]
}
[코드]
PlayCode - Code Sandbox. Online Code Editor
playcode.io
| index.html | |
| <message-list> | > component > MessageList > import MessageList from '경로' |
| :items | > prop { items } > template { items } > prop { item } > template { item } |
| @delete | deleteMessage() > @delete="deleteMessage" > $emit('delete') > @delete=deleteMessage(message) > $emit('delete') > @click="deleteClicked" |
$emit('delete') 는 @delete 말하며, delete는 별칭이기때문에 실질적인 이벤트는 @click 이다
# 사용자정의 디렉티브 (directive)
v-[사용자 지정명]
주로 form 유효성 검사에 사용하기 위해 사용한다 ( vue plugin 을 이용하여 전역으로 돌려도 됩니다 )
[방법 1 - 전역]
// 전역 사용자 정의 디렉티브 v-focus
Vue.directive('focus', {
// 바인딩 된 엘리먼트가 DOM에 삽입되었을 때
inserted: function (el) { // 훅 함수(Hook function)
// 엘리먼트에 포커스 한다
el.focus()
}
})
[방법 2 - 로컬]
// 로컬사용자 정의
directives: {
// v-focus 정의
focus: {
// 바인딩 된 엘리먼트가 DOM에 삽입되었을 때
inserted: function (el) { // 훅 함수 (Hook function)
// 엘리먼트를 포커스 한다
el.focus()
}
}
}
[코드 - 로컬 방법]
[결과 - 로컬 방법]
# 훅 함수 (Hook function)
| 훅 함수 | 설명 |
| bind | 디렉티브가 처음 엘리먼트에 바인딩 될 때 한번만 호출 됩니다. 이곳에서 일회성 설정을 할 수 있습니다. |
| inserted | 바인딩 된 엘리먼트가 부모 노드에 삽입 되었을 때 호출 됩니다. (이것은 부모 노드 존재를 보장하며 반드시 document 내에 있는 것은 아닙니다.) |
| update | 포함하는 컴포넌트가 업데이트 된 후 호출됩니다. 그러나 자식이 업데이트 되기 전일 가능성이 있습니다 디렉티브의 값은 변경되었거나 변경되지 않았을 수 있지만 바인딩의 현재 값과 이전 값을 비교하여 불필요한 업데이트를 건너 뛸 수 있습니다. (아래의 훅 전달인자를 참조하세요) |
| componentUpdated | 포함하고 있는 컴포넌트와 그 자식들 이 업데이트 된 후에 호출됩니다. |
| unbind | 디렉티브가 엘리먼트로부터 언바인딩된 경우에만 한번 호출됩니다. |
# 디렉티브 훅 전달인자
| 디렉티브 훅 전달인자 | 설명 | |
| el | 디렉티브가 바인딩된 엘리먼트. 이 것을 사용하면 DOM 조작을 할 수 있습니다. | |
| binding | name | 디렉티브 이름, v- 프리픽스가 없습니다. |
| value | 디렉티브에서 전달받은 값. 예를 들어 v-my-directive="1 + 1"인 경우 value는 2 입니다. |
|
| oldValue | 이전 값. update와 componentUpdated에서만 사용할 수 있습니다. 이를 통해 값이 변경되었는지 확인할 수 있습니다. |
|
| expression | 표현식 문자열. 예를 들어 v-my-directive="1 + 1"이면, 표현식은 "1 + 1" 입니다. |
|
| arg | 디렉티브의 전달인자, 있는 경우에만 존재합니다. 예를 들어 v-my-directive:foo 이면 "foo" 입니다. |
|
| modifiers | 포함된 수식어 객체, 있는 경우에만 존재합니다. 예를 들어 v-my-directive.foo.bar 이면, 수식어 객체는 { foo: true, bar: true } 입니다 |
|
| vnode | Vue 컴파일러가 만든 버추얼 노드. VNode API에 전체 설명이 있습니다 | |
| oldVnode | 이전의 버추얼 노드. update와 componentUpdated에서만 사용할 수 있습니다. | |
# 다이나믹 디렉티브 전달인자
v-[사용자 지정명]:[전달인자]="[인자값]"
[코드]
[결과]
# 함수 약어
[코드]
[결과]
# 객체 리터럴 인자
[코드]
[결과]
# Vue 필터
{{ value | functionA | functionB ... }}
Vue 의 필터 처리 방식은 functionB( functionA( value ) ) 이러하다
value 는 functionA의 인자로 들어가고 functionA 가 리턴하면 functionB 의 인자로 들어가 리턴한다.
functionC | functionD 무한개 필터처리가 가능하다
Vue.js의 필터는 자바 EE의 필터와 다르다 Vue 애플리케이션에서는 필터를 이용해 이중 중괄호 보간법 혹은
v-bind 표현법을 이용할 때 텍스트 형식을 지정한다.
필터는 표현식의 값을 첫 번째 인자로 가지는 자바스크립트 함수다.
[방법 1 - 전역]
Vue.filter('[사용자 지정명]', function([인자]) {
return [반환값]
}
[방법 2 - 로컬]
filters: {
[사용자 지정명] ([인자]) {
return [반환값]
}
}
[코드 - 로컬 방법]
[설명 - 로컬 방법]
[결과 - 로컬 방법]
# 믹스인
Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다.
mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면
해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다.
# 기본
[결과]
[mixin 객체에서 컴포넌트 접근 방법]
this.$options.data().[프로퍼티명]
this.$data.[프로퍼티명]
# 옵션 병합
mixin과 컴포넌트 자체에 중첩 옵션이 포함되어 있으면 적절한 전략을 사용하여 “병합”됩니다.
data 오브젝트의 내용이 상충하는 경우, 컴포넌트에 선언된 data 오브젝트를 우선으로 하여 재귀적으로 병합됩니다.
[결과]
# 전역 Mixin
mixin은 전역으로 적용할 수 있습니다. [주의]
mixin을 전역으로 적용하면 이후에 생성된 모든 Vue 인스턴스 에 영향을 미칩니다.
적절히 사용하면 사용자 정의 옵션에 대한 처리 로직을 주입하는 데 사용할 수 있습니다.
[코드]
index.html
|
1
2
3
4
5
6
|
<div id="app">
{{message}}
</div>
|
cs |
main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
var vm1 = new Vue({
myOption: '[vm1] hello!'
})
// `myOption` 사용자 정의 옵션을 위한 핸들러 주입
Vue.mixin({
data() {
return {
message: '전역 인스턴스'
}
},
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
var vm2 = new Vue({
el: '#app',
data() {
return {
message: '컴포넌트 인스턴스'
}
},
myOption: '[vm2] hello!'
})
var vm3 = new Vue({
myOption: '[vm3] hello!'
})
|
cs |
[코드]
[설명 & 결과]
# 플러그인
플러그인은 Vue.js 프레임워크에 확장성을 제공하는 좋은 방법이다.
가장 많이 사용되는 플러그인은 VueX와 Vue Router 플러그인이다.
유효성 검사 프레임워크인 Vuelidate 또한 플러그인이다.
위에서 본 믹스인은 모듈로 나뉘어 작성하였을 때 사용하려면 먼저 가져와야만 했다.
여러 컴포넌트에서 이 믹스인 기능을 비활성화 하려면 여러 파일을 변경해야하는 데 이는 비효율적이다.
하지만 플러그인은 관심없는 훅을 끌 수 있는 스위치 기능을 제공한다.
전역 메소드 또는 전역 디렉티브 등 여러 컴포넌트에서 공통으로 처리하는 일을 할 때 사용하기 좋다
[플러그인 기본 작성법]
[플러그인 기본 사용]
[코드]
index.html
|
1
2
3
4
5
6
|
<div id="app">
<p v-custom="bindingValue"></p>
</div>
|
cs |
main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
const swichers = {
created: true,
beforeMount: true,
mounted: true,
destroyed: true,
}
const Method = {
install(vue_arg, options_arg) {
Object.assign(swichers, options_arg)
/* 디렉티브 (Directive) */
vue_arg.directive('custom', {
bind: function(el, binding) {
if (swichers.created) {
el.innerText = binding.value
}
}
})
/* 믹스인 (Mixin) */
vue_arg.mixin({
created: function () {
if (swichers.created) {
console.log('[swichers]', swichers)
console.log('[options_arg]', options_arg)
console.log('플러그인 믹스인 ! 인스턴스 생성 시 출력')
}
}
})
}
}
// 선택적으로 몇 가지 옵션을 전달 할 수 있다
// Vue.use는 자동으로 같은 플러그인을 두 번 이상 사용하지 못하기 때문에
// 같은 플러그인에서 여러 번 호출하면 플러그인이 한 번만 설치됩니다.
Vue.use(Method.install, {
created:true, beforeMount:false, mounted:false, destroyed: false
})
var vm = new Vue({
el: '#app',
data() {
return {
bindingValue: '플러그인 사용자 디렉티브 입니다'
}
}
})
|
cs |
[결과]
보통은 모듈로 하여 import 하는 방식으로 사용하는 데 설명을 위해 1개의 JS 파일안에 작성하였다
(1~30 라인을 모듈로 빼고 사용하면 된다)
[공식 홈페이지 참고 바람]
플러그인 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
# 반응형 시스템
Vue.js 는 내부적으로 변형된 옵저버 디자인 패턴을 구현해 데이터의 의존성을 수집하고
데이터가 변경될 때 와처(watcher)에 의해 통지한다.
[공식 홈페이지 참고 바람]
반응형에 대해 깊이 알아보기 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
Vue JS 가 변경 내용을 watch 가 추적 할 수 없는 유형이 2가지
첫번째는 배열의 인덱스를 이용한 요소 변경은 추적할 수 없다.
두번째는 length=? 을 이용한 배열길이 변경은 추적할 수 없다.
[배열의 인덱스]
[배열의 요소 변경 방법]
this.$set(object, key, value)
[배열의 길이]
[배열의 길이 변경 방법]
this.array.splice(10)
로컬스코프를 전역스코프로 바꾸기
window.vm = new Vue({...})
또는
var vm = new Vue({...})
window.vm = vm
'16. Vue JS > 기초' 카테고리의 다른 글
| 04. Vue JS 2 - Vue Router 고급 매칭 패턴 (0) | 2021.06.16 |
|---|---|
| 00. Vue Js 시작전 (0) | 2020.07.24 |