02. Vue JS 기본 (요약) [미완성]

OS	Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue	2.5.13

 

# 온라인 에디터

PlayCode - Code Sandbox. Online Code Editor

 

# 공식홈

시작하기 — Vue.js

 

# Vue API reference

API — Vue.js

 

[콘솔]

[출처] 공식홈페이지

 

[라이프 사이클 다이어그램]

[출처] 공식홈페이지

 

# 라이프 사이클

[시작전 코드 보기]

[코드]

index.html

<div id="app">
 
  <p>DOM (Document) </p>
  
  <message-list :items="messageList" @info="testMethod"></message-list>
 
  {{ newMessage }}
 
  <p v-custom="bindingValue"></p>
    
</div>
 

 

main.js

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
      }
    }
  */
  }
})
 

 

라이프 사이클을 처음보는 경우는 이해가 안되실 수 있으니 스킵 후 아래 용어가 사용 될 때 다시 보시면 

이해하시는데 어려움 없으실 겁니다.

 

 

라이프 사이클	설명
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

<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>
 

 

main.js

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
  }
})
 
 
 
 

 

[결과]

이미지 클릭

 

참고한 사이트

Vue 라이프사이클 이해하기 - 재그지그의 개발 블로그

 

# 선언적 렌더링

[코드]

 

[설명]

 

[결과]

이미지 클릭

# 보간법 (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

 

 

[명령적 프로그래밍 방식] watch = 반응형 callBack

 

ㄴ watch (이미지 클릭)

watch 방식은 fullName 이라는 프로퍼티도 만들어야 하고

firstName 과 lastName이 변경될 때 감지를 하여 callBack 으로 fullName 값을 변경하는 방식이다.

아래는 위 예시와 같은 computed 방식은 훨신 더 간단하다

ㄴ computed (이미지 클릭)

 

[출처] 공식홈페이지

비동기 또는 시간이 걸리는 작업을 할 때 사용함 (=ajax)

 

+추가

data: { return { name: 'martin' }}
watch () {
  martin(val, oldVal) {
    logic...
  }
}

// data 의 name 이 변경될 때 watch 의 logic 이 실행된다

 

+주의

redo 를 watch 하는 watch 를 변경되는 경우 무한 반복된다

지금은 redo 를 직접적으로 바뀐거지만, 간접적으로 다른곳에서 변경되는 코드가 watch 안에 있다면, 같은 현상이다

watch 는 비동기로 처리 된다

때문에 대부분의 사람들이 watch 를 왠만하면 쓰지 말라고 하며, watch 없이 다른 방법으로 구현하는 것을 추천한다

 

아래 공식 홈 예제 참고바람

computed와 watch — Vue.js

 

# 클래스와 스타일 바인딩

<선택 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

 

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

 

---

 

<반복문> 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

 

---

 

[ 자바스크립트 Array Refernce]

JavaScript Array Reference

 

배열 변경 감지

배열 변경 감지는 원본 배열이 수정된다.

메소드	설명	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()	배열 역배치

코드

<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>
 

---

배열 대체

메소드	설명	GIF
filter
concat
slice

 

[공식 홈페이지 꼭 참고 바람]

리스트 렌더링 — Vue.js

 

# 이벤트 핸들링

<선택 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

<div id="app">
 
  <!-- [기본] -->
  <message-list :items="newMessage"></message-list>
 
  <!-- [v-for] -->
  <!-- <message-list :items="messageList"></message-list> -->
    
</div>
 

 

main.js

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: '새 메시지'
    }
  }
})
 

 

[결과]

 

[기타 예제]

기타 예제 1

name과 price 속성 앞에 콜론을 붙이지 않은 이유는 JS 프로퍼티명을 바인딩하지 않고 있기 때문입니다.

 

기타 예제 2

 

[key 를 사용하는 이유]

리스트 렌더링 — Vue.js

 

# 컴포넌트 - module

[방법 - 로컬]

components: {
  [컴포넌트명]
}

 

[코드]

PlayCode - Code Sandbox. Online Code Editor

 

 

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

<div id="app">
 
  {{message}}
 
</div>
 

 

main.js

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!'
})
 

 

[코드]

 

[설명 & 결과]

 

# 플러그인

플러그인은 Vue.js 프레임워크에 확장성을 제공하는 좋은 방법이다.

가장 많이 사용되는 플러그인은 VueX와 Vue Router 플러그인이다.

유효성 검사 프레임워크인 Vuelidate 또한 플러그인이다.

 

위에서 본 믹스인은 모듈로 나뉘어 작성하였을 때 사용하려면 먼저 가져와야만 했다.

여러 컴포넌트에서 이 믹스인 기능을 비활성화 하려면 여러 파일을 변경해야하는 데 이는 비효율적이다.

하지만 플러그인은 관심없는 훅을 끌 수 있는 스위치 기능을 제공한다.

 

전역 메소드 또는 전역 디렉티브 등 여러 컴포넌트에서 공통으로 처리하는 일을 할 때 사용하기 좋다

 

[플러그인 기본 작성법]

[출처] 공식 홈페이지

 

[플러그인 기본 사용]

 

[코드]

index.html

<div id="app">
 
  <p v-custom="bindingValue"></p>
 
</div>
 

 

main.js

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: '플러그인 사용자 디렉티브 입니다'
    }
  }
})
 

 

[결과]

이미지 클릭

 

보통은 모듈로 하여 import 하는 방식으로 사용하는 데 설명을 위해 1개의 JS 파일안에 작성하였다

(1~30 라인을 모듈로 빼고 사용하면 된다)

 

 

 

[공식 홈페이지 참고 바람]

플러그인 — Vue.js

 

# 반응형 시스템

Vue.js 는 내부적으로 변형된 옵저버 디자인 패턴을 구현해 데이터의 의존성을 수집하고

데이터가 변경될 때 와처(watcher)에 의해 통지한다.

 

[출처] 공식홈

[출처] 공식홈

 

[공식 홈페이지 참고 바람]

 

반응형에 대해 깊이 알아보기 — Vue.js

 

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